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.
Related
This css style is working perfectly on all browsers when the site is on LOCALHOST.
but when I uploaded the site to a live server, It also works on all browsers except IE.
The background-image don't show.
.button {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
position:relative;
background:url(../images/button-bg.gif) 0 0 repeat-x #3b3d3e;
border:1px solid #3b3d3e;
font-size:11px;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:1px 9px;
margin-right:7px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
behavior:url(js/PIE.htc);
}
NOTE: as you can see I use the color #3b3d3e with the background, and when the page loads I see this color for a part of a second, and then it disappears.
what is wrong with this?
I believe background should be written out in this order:
background: color position size repeat origin clip attachment image;
Maybe IE is the only browser that cares?
If that doesn't work maybe try adding each background value you need seperately:
background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.
Also as a side note you might want to try commenting out the last line in the css "behavior:url(js/PIE.htc)". I know sometimes these things like to conflict with other properties. I have never used PIE myself, but its worth a shot commenting out.
Color first:
background: #3b3d3e url(../images/button-bg.gif) 0 0 repeat-x;
Try adding zoom:1 to .button
This triggers the hasLayout property on IE7.
Detailed explanation here:
On having Layout
I think I got it fixed but still don't know what is the reason...
I removed the
behavior:url(js/PIE.htc);
from it, and it worked perfectly...
I'm pretty sure that the file PIE.htc is there but I don't know what is wrong.
anyone??
I haven't tried this on my site yet, because the server has been down but it might be worth looking into Modernizr http://modernizr.com/
I had a hard time getting background images to show moving from local to my server, and what I ended up having to do was use the full path of the image.
If it is infact a browser confliction problem, this should help solve it.
Also, have you tried commenting out behavior:url(js/PIE.htc);?
This could be what's giving it fits.
When i put a background-image in my CSS, I type it like so:
background-image: url("path/to/image.img"); background-repeat:no-repeat;
background-color:#color;
I see you tried this, and I'm trying to think of several options, would working with the Z-index affect what you are trying to do?
Give Modernizr a look over
It may be a relative path issue between localhost and server environment. See the detailed explanation on the CSS 3 PIE known issues page.
http://css3pie.com/documentation/known-issues/#relative-paths
Was PIE working at all? — Were there rounded corners on the button on IE 7?
This may be helpful too.
http://css3pie.com/documentation/known-issues/#z-index
body {
margin:0px;
padding:0;
background: #777 url(foodwine.png) center fixed;
background-repeat:no-repeat;
text-align:center;
}
I can't seem to get this background image to show up on IE7 (I'm not sure about other IEs).
I've tried all different kinds of variations and spacings but it just doesn't want to show up in IE.
Any help would be much appreciated!
Edit: I'm using rails to serve the image and it works in firefox/chrome. I tried specifying the directory with '/images/foodwine.png' but now it doesn't show up on any browser.
http://afternoon-samurai-9254.herokuapp.com/ This is the page I'm working on.
Try this:
body {
margin:0;
padding:0;
background: #777 url(foodwine.png) no-repeat center fixed;
text-align:center;
}
I'm guessing that the image is in a directory called images or something similar? If so, calling it from your root web directory is the safest way to make sure it is referenced properly:
background: #777 url('/images/foodwine.png') center fixed;
Try to use margin:0, instead of 0px.
As Cole said add quotes around the image url. I suppose the image exists 'cause you are pointing out explorer, so i think you tried other browsers.
You need to have strict doctype for fixed positioning to work on IE7.
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
It seems that ie7 have a weird behavior (bug?) rendering heavy images (2.3MB in this case), try using jpg image format instead, a png is normally used to support transparency which I dont see it in this case.
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>
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 it set up in css to have the background an image slightly bigger than the content section so as to have a shadow behind it that repeats in the y direction but in IE it doesn't show the transparency. I have used google to try to solve this problem with no luck having done the image in css.
CSS:
#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}
HTML:
<div id="shadow">
</div>
Any help is greatly appreciated as I at a total loss on this.
If it's possible, you make the png a gif, and everyone is happy.
If that isn't possible, the approach I use is the IE only css behavior.
With a behavior you can link to an htc file, like the one found here: http://www.twinhelix.com/css/iepngfix/
You would then have to add CSS like:
behavior: url(iepngfix.htc)
IE7 supports png transparency.
You could use something like a browser gate (which is an ugly hack) if you'd like to support IE6.
Use selectors in your CSS which IE<7 doesn't support:
html>body #transparent_png {
background: url(gfx/transparent_png.png);
background-repeat: no-repeat;
}
#transparent_png {
/* additional properties here */
}
the html>body #transparent_png style is ignored by IE6. Then, we use the ugly DXImageTransform-filter in a seperate .css file to display the png in IE6 transparently.
But this css should only be loaded if the ie version is less than 7:
html header:
<!--[if lt IE 7]>
<style type="text/css" media="screen, projection">
#import "iefixes.css";
</style>
<![endif]-->
The iefixes.css contains something like this :
#transparent_png {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');
}
Unfortunately, this filter does not support repeat-x or repeat-y. But with this gate hack, you could display an ugly dithered gif shadow for IE 6 instead of the nicer png shadow :).
But, there is also a sizingMethod property for the DXImageTransform-filter (see http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx), so you could scale the image to the size of its container element:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');
A very nice png fix for IE6 can be found here
I used it and can assure u it works.
It is JS though, but most people have it turned on lately
All the above may work, especially the alpha image loader which is good, vut if you plan on using it and want to rely on it in the future then you are better using another technique.
The best I have found is:DD_belatedPNG.js
it works likke a treeat and is very easy to use.
The problem I have with the others is that there are bugs when you want to use links appearing over the top of the bg. They dont work, without further hacks.