Need help? Check out our Support site, then

Making text areas and gallery background transparent?

  1. I'm trying to have my page text and image gallery thumbs "float" over the background image, rather than displaying the white box that obscures the background image. I will also have a different background image for each page (I've already figured that out), if it matters.
    Here is a page that I've added a background image to.

    Again, how can I get rid of the white boxes around the text and image gallery?
    I'm using a customized Expound theme.

    The blog I need help with is

  2. Hi there, the following will make that white background for the header and content area semi-transparent. The last number, 0.75 is the opacity. 1 would be completely opaque and the smaller the number, the more transparent it would be.

    #page {
        background: rgba(255, 255, 255, 0.75);

    If you wish, or if it makes more sense, you can target individual pages as you did with the background image by making the selector page specific such as this.

    .page-id-27 #page {
        background: rgba(255, 255, 255, 0.75);
  3. towingsolutions

    how do i make my content background black and then transparent

  4. Hi, since you are using a different theme than the one discussed in this thread, can I ask that you start a new thread to prevent confusion for those that may come upon this in the future. Many thanks in advance.

    In the Forever theme, you already have this in your custom CSS with a grey color, so change it so it looks like this and then you can adjust the 0.7 value on the end to suit your desire. You will need to change text colors of course so they will show up.

    #page, li.current_page_item a, li.current_page_item a:hover {
        background: rgba(0, 0, 0, 0.7);
  5. towingsolutions

    Hi Sir thank you for helping me on that. but can you tell me now how to make my menu font white, its black and cant be seen

  6. You are welcome, and to change the menu text color, add these. The first is the non-hover color and the second is the hover color (I've used obnoxious colors in my example).

    #access a {
    color: #cc33cc;
    #page #access li:hover > a {
    color: #33cc33;

Topic Closed

This topic has been closed to new replies.

About this Topic