Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Unable to add background image to header


satinwoods

Recommended Posts

I'm trying to add a background in the #header. I know the image works because I tried it with the background of the webpage and it works fine there. For some reason its changing the stylesheet on me.

 

In the stylesheet.css file I have;

 

#header {
height: 211px;
background-image:url(images/background/tile1.jpg);
background-position:center;
background: #000;
color: #fff;
}

And I know that image works because I was able to use it for the body background

 

But when I load it up, FireFox tells me it has this

 

  • html>
  • body>
  • div#bodyWrapper.container_24>
  • div#header.grid_24

http://strutfashion.ca/ext/960gs/960_24_col.css

/* Line 1 */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24
{
display: inline;
float: left;
margin-left: 5px;
margin-right: 5px;
}

/* Line 1 */
.container_24 .grid_24
{
width: 950px;
}

 

 

http://strutfashion.ca/stylesheet.css

/* Line 34 */
#header
{
height: 211px;
background-color: #ff0066;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
color: #ffffff;
}

 

The height and bg-color work and I can change those, but the bg-image is being overwritten.

 

Why is this happening and how do I correct this?

Link to comment
Share on other sites

See if it makes any difference to delete

 

background: #000;

 

I think the image is there all right, but underneath the black. And you don't really need

 

background-position:center;

 

if the intention is to auto-repeat the tile.

Link to comment
Share on other sites

For future reference, I think you wanted background-color: rather than background:. "background" resets a whole bunch of things, and wiped out your background-image (it's a "composite" property). A background color is necessary unless you tile in both directions.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...