I want to show a png file in background of a div. I have this CSS style for put it in the correct place. I'v tested directly in my HTML and the style works properly. I't doesn't work wen I use php variable.
<?php
if ($RScoluna1['nova'] == 1){
$style = "background-image:url(layout/nova.png); background-repeat:no-repeat; background-position: 220px 0;";
} else {
$style = "";
}
?>
<div class="<?php echo $row_RScoluna1['class_cor']; ?>" style="<?php echo $style; ?>">
If you copy pasted
background-image:url(layout/nova.png)
from a css file, then you should fix the path accordingly to the position of the script.
In example:
background-image:url("../css/layout/nova.png");
I hope it helps.
Related
I have initialize a variable to fetch from this directory as shown
<?php $imgSrc = base_url()."decoy/thumbs/".$item["filename"]; ?>
now I want to assign the variable to a background url of css code block as shown but it is not displaying the image background
<div style="background: url('<?php echo $imgSrc ?>') no-repeat;" class="large"></div>
can anyone kindly assist me on how I can I achieve the above.
Follow these easy steps to investigate your problem.
After getting the image
<?php $imgSrc = base_url()."decoy/thumbs/".$item["filename"]; ?>
Verify what was returned to the image variable <?php echo $imgSrc; ?>
That way you will be better placed if you find nothing wrong update your question with the necessary information.
Finally I prefer you use string concatenation instead change this
<div style="background: url('<?php echo $imgSrc ?>') no-repeat;" class="large"></div>
to
<?php
$imgSrc = base_url()."decoy/thumbs/".$item["filename"];
echo '<div style="background:'.url($imgSrc).' no-repeat;" class="large"></div>';
?>
You need to put the "imagePath" in place of "imgSrc" so that the image will prompt in backgroud, because in the backroud-url there is no need of absoulte path only relative path will be ok for this.
$imgPath = "../decoy/thumbs/".$item["filename"]";
<div style="background: url('<?php echo $imgPath; ?>') no-repeat;" class="large"></div>
I'm designing a web page to show some commodity
results (such Model, price, Comment) for every Commodity is a database
and I call theme to show in each Commodity (it while be shown in a div)
I wanna to set backgrounds for each div (it saved in database and every Commodity have one background-image)
please tell me whats the true syntax for this div s
for example I wrote this code:
<div class="commodities"> <style>.commodities{ background-image:<?php $Images[$i]?>} </style>
<?php
echo "Model:";
echo $Models[$i];
echo "<br><br>";
echo "Price: ";
echo $Prices[$i];
echo "<br><br>";
echo $Comments[$i];
?>
</div>
please help me to fix this part of code: { background-image:}
You have to do this:
<div class="commodities" style="background-image: url('<?php $Images[$i]?>');">
<?php
echo "Model:";
echo $Models[$i];
echo "<br><br>";
echo "Price: ";
echo $Prices[$i];
echo "<br><br>";
echo $Comments[$i];
?>
</div>
If you put < style > tags in the < body > (put it on the < head > tags) you are doing nothing ;)
Instead use style property. ;)
Apart you are forgetting to use url tag on the background-image property. ;)
You are missing two keywords, scoped and url. See e.g. http://www.w3schools.com/tags/att_style_scoped.asp and http://www.w3schools.com/cssref/pr_background-image.asp.
use inline css.
<div style="background-image: url(<?php echo $variable_name; ?>);">
or
use internal css.
<style type="text/css">
.logo {
background: #FFF url(<?php echo $variable_name; ?>);
}
</style>
I'm working on a website where the homepage has a dark background, yet all the other pages have a white background.
I am using pho to include a header file to show the logo, navbar, telephone details etc on every page.
As the home page has a dark background, the logo has white text, yet the logo use on the other pages has dark text.
I'm looking for a way of using php, so that I include a single header file on every page. If the homepage has a class of "home" the logo image with white text is shown and on all other pages the logo image with dark text is shown.
something along these lines:
if (body class="home") {
<img src="images/logo-with-white-text" />
else {
<img src="images/logo-with-dark-text" />
};
Is this possible?
Any help or advice would be greatly appreciated :)
I'm assuming your homepage currently looks something like this:
<html>
<head>...</head>
<body class="home">
...
<?php include 'header.php'; ?>
...
You could make the class a variable, and reference this variable from the included header file:
<?php $class = 'home'; ?>
<body class="<?php echo $class; ?>">
...
<?php include 'header.php' ?>
...
In header.php:
<?php if (isset($class) && $class == 'home'): ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-dark-text" />
<?php endif; ?>
You could check whether you are on the homepage (Depending on your exact implementation) with a snippet like this:
if (basename($_SERVER['SCRIPT_NAME']) == 'index.php') {
// home page
}
else {
// some other page
}
$_SERVER['SCRIPT_NAME'] contains the actually loaded file relative from the host until the query-string:
http://example.com/my/folder.php?a=b => /my/folder.php
For more information have a look at basename in the PHP manual.
$_SERVER['REQUEST_URI'] contains the current page url (after the domain). You could check instead that the page has the homepage url with that.
Depending on your setup you'd have something like
<?php if ($_SERVER['REQUEST_URI'] == '/') : ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-white-text" />
<?php endif; ?>
You don't need PHP for this if you use an image replacement technique to display the image.
Basically, you use an <h1> or something for your logo, with text, then use negative text-indent to hide the text, set a height and width, and use a background image for the logo. Example:
http://jsfiddle.net/nwNbb/
<h1 id="logo">My Website</h1>
#logo {
text-indent:-999px;
background:url(/path/to/logo.png);
height:100px;
width:500px;
}
Then, in your CSS, you can change the background image based on the body class:
body.home #logo {
background:url(/path/to/alternate-logo.png);
}
You can actually do image replacement on images as well:
http://jsfiddle.net/nwNbb/3/
img {
/* 500x100 replacement image */
background:url(http://lorempixum.com/500/100);
/* hide original image */
width:0;
height:0;
/* use padding to set width/height of replacement */
padding:50px 250px;
}
I'm writing some php/html code. I have a css file that has several backgrounds. Is there any way to write an if statement to select a div id depending on a php variable?
You can generate CSS via PHP, first sort everything out and then print with text/css header.
<?php
header("Content-Type: text/css");
?>
*{margin:0;padding:0;}
Anyway you need to clarify your question.
could do it in-line in your html/php
<div id="<?= ($true_or_false) ? 'div_id_1' : 'div_id_2' ?>">div content</div>
Or... if you have more than 2 div id options just do an classic if statement
<?php
if($condition) {
$div_id = 'something';
}
else if ($another_condition) {
$div_id = 'something_else';
}
..etc
?>
<div id="<?php echo $div_id ?>">div content</div>
Is this what you mean?
<?php
$divId = $someBoolean ? "peaches" : "pineapples";
?>
<div id="<?php echo $divId ?>">Hello</div>
// file: style.php
<?php
header("Content-Type: text/css");
?>
#mydiv {
background: url('<?php
switch($_GET['background'])
{
case 1:
echo 'blah1.jpg';
//etc...
}
?>');
}
There are a few different ways you can do this. You can do it in php and assign a different class or id. Or you do it with javascript and change the class or id after the page loads.
I am trying to create a sidebar for which I can specify the image in the back-end of my wordpress cms using custom fields, now I have gotten it to work, with just one little bug, if the user enters a invalid URL, the image link will display as broken and will not display, is there a way that I can hide the broken image icon perhaps?
I have a background image set for the parent DIV element so that if there is no image to display, the parent's background will.
here is the PHP code:
//here I get the 'side_image' custom field, which will contain the URL to the side image
if (have_posts()) :
while (have_posts()) : the_post();
$side = get_post_meta($post->ID, 'side_image', true);
endwhile;
endif;
HTML:
<!--here is the HTML markup-->
<div id="inner_content_right">
<img src="<?php echo $side; ?>" />
</div>
CSS:
#inner_content_right {
background: url(images/Layout_3_other_06_backup.jpg) no-repeat;
width: 259px;
height: 691px;
float: right;
position: relative;
bottom: 28px;
}
Thanx in advance!
You could try something like
<!--here is the HTML markup-->
<div id="inner_content_right">
<img src="<?php if (#getimagesize($side)) echo $side; ?>" />
</div>
Thanx guys, I got it to work with this code!
//check if the string is a valid URL
function checkURL($url)
{
return preg_match('|^http(s)?://[a-z0-9-]+(.[a-z0-9-]+)*(:[0-9]+)?(/.*)?$|i', $url);
}
//returns a image with a valid URL or nothing at all
function validateImage($one){
if(!checkURL($one))
{
$errMsg .= "Please enter valid URL including http://";
//return $errMsg;
} else {
$headers = get_headers($one, 1);
$return = $headers[0];
if($return!='HTTP/1.1 404 Not Found'){
$string = "<img src='$one' />";
return $string;
}
}
}
Thanx for all your help!