Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Template transparency

  1. lralon
    Member

    Hello,

    I was wondering what CSS code I would need to make the main body of my blog somewhat transparent so that the background image can show through. Here is my blog: http://www.figureground.ca/

    I would appreciate your comments.

    Thank you!

    L.

    The blog I need help with is figureground.ca.

  2. thesacredpath
    Member

    To have the widest possible browser compatibility, my suggestion would be to create a transparent PNG image in an image editing program that has a white (or whatever) color with the level of opacity/transparency you want. I would suggest perhaps 10px x 10px, or even 5px x 5px. You then upload it to your media library, add the following to your custom CSS and replace IMAGE URL between the double quote marks with the URL of that image.

    #page {
background: url("IMAGE URL") repeat scroll 0 0 transparent;
}

    You might have to try a few different transparency/opacity levels to get a good balance that allows the image to show through, but keeps the text legible.

  3. lralon
    Member

    Hi there,

    Thanks for the answer. I'm having a hard time explaining myself. I didn't mean to say that I wanted the images to be transparent; rather, what I'm trying to figure out is how to make the white section in the body at the center of the blog transparent, so that the black and white photo in the background shows through it. Does that make sense?

    Thanks,

    L.

  4. lralon
    Member

    Let me put it this way: the idea is that the background image can mesh with the main body of the blog in such a way that the drawing in black doesn't go behind, but overlays the template. Does that make more sense?

    Thanks,

    L

  5. ceo
    Member

    Thanks for the answer. I'm having a hard time explaining myself. I didn't mean to say that I wanted the images to be transparent; rather, what I'm trying to figure out is how to make the white section in the body at the center of the blog transparent, so that the black and white photo in the background shows through it. Does that make sense?

    That is exactly what thesacredpath is suggesting you do. He isn't telling you to replace your background or make it transparent; he's explaining how to make the white background your text appears on be less opaque by using another image as the background for that area of the page.

  6. thesacredpath
    Member

    The code I gave, if you make and put in the URL of a transparent PNG file as I explained, will make the white area behind the content transparent and the background image will show through. It does not alter your background image at all.

    There is a pure CSS solution, but not all browser versions understand that solution, so I typically don't use it as it means that some of your visitors would see the transparency, and some would not. This is why I suggested the transparent image solution.

  7. lralon
    Member

    Get it. Thank you so much to you both.

  8. lralon
    Member

    Odd, I did as you told me and when I opened up the page with CHROME, it actually looked just right for two seconds, as it was loading, before reverting back to its original state. Almost like the browser corrected the added code. Any suggestions?

  9. lralon
    Member

    It doesn't work at all with IE...

  10. thesacredpath
    Member

    The image I'm seeing (I downloaded it) does not have has no transparency. It is solid white.

  11. lralon
    Member

    Hey, you were right. It worked! Thank very much for your help and patience, pal. You rock!

  12. thesacredpath
    Member

    Not a problem and you are welcome. The site looks good. I like the background image.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags