Add a Background to Header
 

Hello there,

I am in need of some help. I'm looking to add a background to the head.tpl file in my site so that there is an image in the background of the entire width of the header but am having problems accomplishing this. Can someone help me out with how to do this or let me know if this is even possible?

I am using version 4.4.3 and using the fashion mosaic skin.
You can view my site here: www.classicrockcreations.net

You will see a small wide image in the upper left corner. What I would like is to use that image and have it display across the entire width of the area the image currently lives. I hope that makes sense.

I tried adding a background image to the the div class="logo" line of code like this but it didn't work:
<div class="logo" style="background-image: url(location)">

I also tried replacing the xlogo.gif file with the image I wanted to be displayed and it did come through as the background for the area.

Any help would be really appreciated!

Thank you!

Re: Add a Background to Header
 

Try adding the background to your css file - in the class:
#header .line1

So you'd have:
#header .line1 {
height: 102px;
margin: 0;
background:transparent url(location) no-repeat left top;


}

Re: Add a Background to Header
 

Hey Paul,

thanks for the suggestion. I tried this and the image for some reason would not appear. I played a little more with the code for the header .line1 class. I found that if I replaced transparent with a color (without the url for the image) the color would appear, but when I added the url for the image it wouldn't. I also tried using background-image instead and still no image. It seems something is keeping the image from being displayed in the header. Not too sure, but I'm going to keep trying to figure this out. There has to be something that I can do to get an image in that area.

Thanks again!
Georgia

Re: Add a Background to Header
 

I suspect it could be something to do with the location you are using - check through the your css file to see other examples of usage of a background image - then copy that format - ensuring your image is in the same location.

Re: Add a Background to Header
 

I've double checked that we are on the right track - if this was your css class, it works fine:

#header .line1 {
background: url("http://www.classicrockcreations.net/skin/fashion_mosaic_green/images/fashion_mosaic/company_logo.gif") repeat scroll 0 0 transparent;
height: 102px;
margin: 0;
}

So you just need to tweak it all together.

Re: Add a Background to Header
 

I will try again today and let you know how it goes. Thanks Paul!