Home › Forums › Graphene WordPress theme › Support

Transparent Header

  • paulshack

    May 15, 2012 at 10:09 pm #4556

    I am working with a transparent header to show background image, the problem I have is the header right and left edge is showing

    http://www.caravanholidayrentals.com

    also what css do I use to make the body tranparent

    Many Thanks

    Paul

    Mod

    Kenneth John Odle

    May 15, 2012 at 10:16 pm #28536

    I have is the header right and left edge is showing

    I’m not sure what you mean here. Are you referring to the shadow on the main content area?

    also what css do I use to make the body tranparent

    I think the ID you are looking for is #content-main (<body> is something else entirely). The easiest way is to create a colorless, transparent .png image and use that for the background: 

    #content-main {
    
background: url('path to transparent.png');
    
}

    That’s how I did it, anyway. You can also easily define various levels of transparency that way, and compatibility across browsers and IE is pretty much assured.

    Try using Firebug to nail down those html and css elements you need to change.

    Stylite

    May 16, 2012 at 8:24 am #28537

    You might want to use CSS to remove the header borders as well.

    I used this:

    #container {box-shadow: 0 0 0px #000;}
    
#header {border-top: 0;}

    (and some more). It overrides the shadows and borders that surround it.

    To regain the shadow around content and footer:

    #content, #footer {box-shadow: 0 0 3px #c0c0c0;}

    Alter the colours a bit to make it suit your needs.

Viewing 3 posts - 1 through 3 (of 3 total)

  • You must be logged in to reply to this topic.