Support » Themes and Templates » Need help making transparent pages

  • genmills


    I would like to make the main body of my pages slightly transparent so that the background image shows through.

    Here is my site:

    I have found several solutions, but I could not get them to work. From what I understand, to maximize browser compatibility, I have saved another version of my background image (the cement looking picture) as a .PNG with about 10% opacity. Then I should use this as the text’s background.

    I have very limited knowledge in programming so please explain in detail any changes I might need to make in the style.CSS.

    I tried using this:

    #page {
    	background: url("") repeat scroll 0 0;

    and this

    #container {
    background: url( repeat scroll 0 0;

    but I didn’t really know where to put them. I just put them under the “Global” section of the style.CSS because I assumed that would make it apply to all of my pages. Neither of these appeared to have any effect.

    If someone could guide me through this step by step I’d be very grateful! Thanks!


Viewing 1 replies (of 1 total)
  • Moderator Andrew Nevins


    Forum moderator

    The problem with opacity with CSS is that all child elements within your transparent element will inherit transparency.

    I would recommend you create a 1 pixel by 1 pixel transparent .gif or .png in some photo editing software, to the transparency you’d like value, then use that as a background transparency.

    Apply that background to the <div id="main"> element and also add a overflow: hidden style.

    #main {
     background-color: red;
     overflow: hidden;

    It is strongly advice you don’t edit themes not custom, especially the default Twenty Ten and Twenty Eleven themes.
    You should either use a Child Theme or a Custom Style/CSS plugin.

Viewing 1 replies (of 1 total)
  • The topic ‘Need help making transparent pages’ is closed to new replies.