Transparent corners in header

[scissorbabe]

I have a PNG logo with rounded corners & a transparent background.

 

I want the floral background to appear behind the corners but I get the green page background instead. How do I make the background of the header transparent?

 

Here's my test site:

 

http://sigil.nl/webstore/

[scissorbabe]

I've tried to find the area using Firebug but I've not been able to find the css I need to alter in my stylesheet.css. Any help would be great. :)

[♥mdtaylorlrim]

I have a PNG logo with rounded corners & a transparent background.

 

I want the floral background to appear behind the corners but I get the green page background instead. How do I make the background of the header transparent?

 

Here's my test site:

 

http://sigil.nl/webstore/

You need to change the background of TD.HeaderInfo to the same image as your store background.

TD.headerInfo {
 font-family:  Times New Roman, serif ;
 font-size: 14px;
 background-image: url(http://www.sigil.nl/plant_repeating_tile.jpg);
 color: #ffffff;
 font-weight: bold;
 text-align: center;
}

 

Keep the background: #00ff00; handy in case I am wrong.

[scissorbabe]

Thanks for the reply. Unfortunately it made no visible difference & the olive green corners are still there.

 

TR.headerInfo {
 background: #00ff00;
}

TD.headerInfo {
 font-family:  Times New Roman, serif ;
 font-size: 14px;
 background-image: url(http://www.sigil.nl/plant_repeating_tile.jpg);

 font-weight: bold;
 text-align: center;
}

[germ]

Thanks for the reply. Unfortunately it made no visible difference & the olive green corners are still there.

 

TR.headerInfo {
 background: #00ff00;
}

TD.headerInfo {
 font-family:  Times New Roman, serif ;
 font-size: 14px;
 background-image: url(http://www.sigil.nl/plant_repeating_tile.jpg);

 font-weight: bold;
 text-align: center;
}

It's not good practice to put http links to images in the stylesheet.

 

If and when you implement SSL it'll cause "unsecure items" popup in IE.

:blush:

 

You are "barking up the wrong tree" in the stylesheet.

 

Look at the HTML source and you'll see what I mean.

 

TD.InformationBoxHeading {
 font-family: Times New Roman, serif ;
 font-size: 14px;
 font-weight: bold;
 background: #586d4e;
 color: #ffffff;
 background-image: url(/new_bg.jpg);
}

TD.CategoriesBoxHeading {
 font-family: Times New Roman, serif ;
 font-size: 14px;
 font-weight: bold;
 background: #586d4e;
 color: #ffffff;
 background-image: url(/new_bg.jpg);

}

TD.SearchBoxHeading {
 font-family: Times New Roman, serif ;
 font-size: 14px;
 font-weight: bold;
 background: #586d4e;
 color: #ffffff;
 background-image: url(/new_bg.jpg);
}

Give those a try in the stylesheet.

 

I think that is the look you are after.

 

Sometimes after changing the stylesheet in order to see any change you have to hold the <Ctrl> key down while doing a page refresh in the browser to force the browser to reload all contents from the server, including the newly changed stylesheet.

 

This works with IE and Firefox.

[scissorbabe]

Thanks for the tips. I couldn't get it to work so I eventually went with non-rounded corners.