Hi I'm updating one of my sites with a fresh template and for some reason my <div>s background image is not showing up. I am an experienced designer and have never had problems with this before so I guess I'm just overlooking a typo I made or something. The code is included below. <div id="main_header"> <div id="logo"> <img src="images/logo.png" alt="Logo" title="logo" /> </div> [COLOR=#ff0000][B]<div id="logonav"> Text will go here above div background image. </div>[/B][/COLOR] </div> Code (markup): And here is my CSS for the problem area: #main_header { width: 100%; height: 125px; float: top; padding: 0px; font: 12px Arial, sans-serif; color: #ffffff; } #logo { width: 450px; height: 125px; float: left; padding: 0px; } #logonav { background-image:url('images/logonav.png') repeat-x; width: 100%; float: top; padding: 0px; font: 12px Arial, sans-serif; color: #ffffff; } Code (markup):
There is no problem in your css. I just copy and past it ...its working fine.. Did you try different browser ?
Idk I just did some tinkering around with it and it ended up working somehow... Must have just had a typo or something.. Thanks very much for looking into it for me though!
It definitely has a problem, although it is up to each browser as to how they interpret or resolve that problem, so you may not always be aware of it. If setting the url and the repeat properties of the background image, do it EITHER of the following two ways: #logonav { background: url(images/logonav.png) repeat-x; } #logonav { background-image: url(images/logonav.png); background-repeat: repeat-x; } Code (markup): But avoid MIXING those shorthand and specific methods.
@ Film that is false. You can combine both and it is highly recommended when you start to 'compress' your CSS file to optimize it. This way you can change only one of the actual CSS styles rather then all of them represented with the shorthand format and having to retype things just to change the image itself. EDIT: After looking at OP's post, I figured you meant his error with combing "repeat-x" inside of the "background-image:" - which is false and is the mistake that he was having.