I want to show a background image for my web page and I have one jpg for that purpose. I am using IE 8 and Notepad to write my html page. So I preferred to use body tag with Background property set to the image path. Very simple! But to my surprise, it does not show the image at all. When I tried the same path inside an Img tag on same page, it works. Also, when I tried another jpg in the body tag, it also worked!
<body background="images/myimage.jpg">
...
...
</body>
Finally, I decided to convert the image into png format and then it worked.
<body background="images/myimage.png">
...
...
</body>
Am I missing anything here in jpg case? Or body tag does not support jpg of particular size, something like that? This looks strange behavior to me. Any help appreciated.. thanks!
The HTML you have should work - check to make sure that the URL to the image is correct. Also ensure that the jpg file is saved in RGB format, as most browsers cannot display CMYK jpegs.
That being said, you should really use CSS to separate your HTML structure from the styling and UI concerns. To do this, remove the background property from the body element and instead put this in a CSS file:
body {
background-image: url('images/myimage.jpg');
}
It's better to work with CSS :
body { background-image: url(images/myimage.jpg); }
a cleaner solution is
<style type="text/css">
body{background:url("images/myimage.jpg");}
</style>
<body>
.....
....
</body>
Related
I have a background image that I want to repeat across (repeat-x) however when I try to view the page, nothing shows up. I'm also using javascript to use a different CSS file for different times of the day, however I am sure that is not the problem because firebug shows that the CSS file was added to the head.
Edit: The problem is that the browser cannot find the file, however when I attempt to link to it, it still cannot find the file.
You can download the archive of the site here:
http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip
Its only 200 or so kb. Nothing massive.
As there is no text in your header the div will not get displayed.Try following css
#header {
background-image:url(img/night/night-time-tile.png);
background-repeat:repeat-x;
position:absolute;
height:100px; // Adjust height according to your image height
top:0;
left:0;
}
And you are sure the path to your image file is correct? Does Firebug load the image?
Your file structure is probably like this
index.html
css/
style.css
img/
night/
night-tile.png
Now, from your style.css you have to use a relative path to your image file. So not img/night/night-tile.png but ../img/night/night-tile.png. In your path it is looking for the image within the css directory, which is wrong.
==Update==
After downloading your code I found 2 more errors.
The first is that you forgot to add rel=stylesheet to the <link> element in which you link to your stylesheet. This way, browsers will not know it's a stylesheet.
The second is that you forgot to add a ; at the end of your first rule in your night.css, resulting in a parse error which causes the background rule not to be rendered.
Good luck fixing these issues!
If you have the Chrome browser, inspect the element where the background image should appear.
Hover over the background-image declaration in the firebug window
background-image:url(img/night/night-time-tile.png);
and you will see the full path of the image.
In the screenshot you can see the equivalent for the stackoverflow logo at the top of the page.
You can then click on the css declaration and change the url until you find the correct path for your image.
The element has no height (either explicit or from content).
This means there are no visible pixels of the element to see the image across.
I have tried different options and also the ones posted on stackoverflow. But nothing seems to work. I have logo.png file in /public/images and a custom.css file in stylesheets.
I want the background of every page to be logo.png (full screen)
I tried the following after searching a lot. But i got nothing. The background is just blank.
Please help
body{
background: url('../images/logo.png') repeat-x ;
text-align:center;
color:#fff;
}
You definitely do NOT want to use repeat-x
To illustrate why, Use the following link http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image and paste the code below and see what happens, then remove the repeat-x and see the results
<html>
<head>
<style type="text/css">
body {
color: white;
background:url('paper.gif') repeat-x;
}
</style>
</head>
<body>
<h1>Hellos World!</h1>
</body>
</html>
If your image is not displaying after remove repeat-x, it will most likely be a path issue (as others have already pointed) out or a bad image.
The only other thing is if there are other classes/divs defined in your css that override the background property that you have set in the body text. Others have suggested you use firebug. I have to whole heartedly agree. Firebug is pretty essential when dealing with HTML and CSS issues.
Firebug is available to Chrome and Firefox browsers (Firefox as a plugin, Chrome by default) but I'm unsure of other browsers.
Instead of repeat-x put repeat.
Other than that check if the path to your image is correct.
Path problem ? ^^
Can you see your image if you just navigate to it ? If not try to use firebug to see what is the problem and to solve it easily.
Full Screen background image :
I found an interesting article on css-tricks may be usefull, the author offers some solutions.
There's a JQuery plugin I've used for full screen background images, and it's called bgStetcher. You can use it to stretch background images to fill the screen. Such a thing cannot be done in CSS.
I'm trying to use CSS sprites to reduce the number of HTTP requests on page. I want the these images to render without borders.
As best I can tell I have configured the CSS correctly, yet I am experiencing the render issues below (note: The Google logo is intentionally clipped):
As you can see, all the browsers still render a border. Also, IE and FireFox render 'broken link' type icons as well.
The HTML used in this example is:
<html>
<head>
<style>
img {border:none}
img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px; width:100px; border:none;}
</style>
</head>
<body>
<img class="css_sprite"/>
</body>
</html>
Can anyone tell me what I'm doing wrong here? I'm sure it must be something simple. Thanks in advance.
The border belongs to this:
<img class="css_sprite"/>
It's a border drawn by the browsers due to a missing image. Here you don't specify any src so the browsers add the border and missing image graphic instead.
Change the img to some other element instead like div or span instead.
I found an excellent solution just put a blank transparent image (preferably 1x1 png) within the src elements...:) as the image is transparent it will not visible at all src does not go blank and your purpose is solved...
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class
How do I get IE6 to display inline base64 encoded images?
<img src="data:image/png;base64,....." />
This works in Firefox/Chrome/Safari but not IE6.
My solution run smoothly on IE6. It may help you!
<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body>
<div id="pic" ></div>
<div id=test style="display: none;">
--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8 /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--
</div>
</body>
</html>
Install Google's Chrome Frame?
Seriously, you can't. IE6 does not have support for base64 inline images.
IE6 needs an expression to correctly interpret base 64 encoded images. Dean Edwards describes the solution here: http://dean.edwards.name/weblog/2005/06/base64-sexy/
Note: this is a very ugly hack. In the first place we were putting image code in our CSS; with this solution you need to either put presentational data in Javascript, or behavioural data in your CSS. Nasty but necessary.
base64 images are showing up in IE6 and IE7... in the last i found a simple solution when you are using a encoded images in css.
"write two attributes in a same class. Use css browser specific hacks"
I am going to explain it below.
<div class="myClass"> </div>
<style>
.myClass{
background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');
/* Above property will work for all browsers*/
*background=url('give real path_to_image');
/* This will work only for ie6 and ie7 */
}
</style>
If this isn't for a corporate setting, I'd say just drop IE6 support all together, and have people install Chrome Frame if they insist on using such an outdated browser.
You can use base64 in CSS, at least.
Please take a look: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
Perhaps more research could possible help using mhtml:// for inline images, too.
This could be a quick fix to make Base64 images showing up in IE6 again:
Base64 image fix for Internet Explorer
*Sorry for the broken link, now comes the correct one!
I think this is a non-intrusive way to make things working again. It actually repair the images after you have those broken images (broken icon) already displayed on IE.
ORGINAL
I do not believe IE6 supports in-line data for the <img/> tag. However, you might want to try another format like GIF or JPG.
EDIT
Given the fact that it took IE forever to accurately support PNG (still debatable) one could easily deduce that PNG might not be supported as an in-line data format for <img/> tags. With that said, goto **ORIGINAL**