Jump to content

Archived

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

sheilahoff

Transparent banner area

Recommended Posts

sheilahoff

I’ve started a new dev site at http://tca.hoffmangraphics.com

 

I want to have the banner image, which is a transparent png file with white text and no background, display as the banner on top of the dark background photo of the site. I’ve tried a lot of CSS combos and so far can’t make it happen. It's placed there using Business Branding.

 

I changed the padding so that the current navbar and banner with green background come out to the edges which is a must with the RevSlider and also with the white body showing off to the sides. I made a mockup that I think validates that having the white text on the green photo should look nice. But I can't seem to figure out how to do it!

 

Then I can change the body padding back. I can’t quite see how to have the header edge to edge still have 30px padding on the body.

 

Thanks,

Sheila


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
James B
Hi Shelia
 
Looking in firebug on your site it looks like you need to do the following. First remove the green using.
 
.section-business-branding {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
 
The area behind the logo then goes white, the reason for this is because you're using the boxed layout. The box layout puts everything in a main container div so the bg color for the page includes the header and the footer. Remove this color using the below so the whole page is transparent. 
 
body.display-boxed .boxed-wrap {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin: 0 auto;
    max-width: 1014px;
    position: relative;
}
 
Then add the bg color to the content area only so it doesn't include the header.
 
#dynamic-content {background:#ffffff;}
 
And you should get the following result.
 

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
sheilahoff

james... BRILLIANT! Thanks so much. This is exactly what I needed. I was close. I had part of it but not the rest. This will help many others I'm sure. THANK YOU!


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
James B

You're welcome Shelia, have a great weekend


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

×