Semi-transparent background for content

  • There seem to be many posts asking how to make the background semi-transparent. Some indicate the only css to add to the child style.css is:

    ‘#page{ background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);}’

    This makes most of the content area the way I would like it but white panels remain on each of the Pages I created.

    I tried to find each container above the content and added this to the child style.css:

    ‘#main{ background-color: transparent;}
    #primary{ background-color: transparent;}
    #content{ background-color: transparent;}
    #entry-content{ background-color: transparent;}?’

    This did not help. Here is a screenshot of the page.

    I even tried adding !important to no avail. Where is the white color coming from?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look at https://davidwalsh.name/css-opacity

    Also make sure you’re using the same selectors in the child file, as style.css

    .entry-content might be a css class (?)

    ideally, post a link to your site.

    Thread Starter ues2005

    (@ues2005)

    Andrew: thanks for the link but I’m not sure how that addresses my question. I’m using Chrome. Re: selectors… I suspect this is the problem. What selectors will resolve this; Or do I need to try each one from the style.css that has #fff as the background color?

    Alchymyth: just tried .entry-content but also did not work. The site has to be protected for the time being but the only thing I did to the WP site is add the above styles to the child theme, which I set up using the instructions in the documentation. Didn’t edit the twentyeleven theme and didnt’t add anything else to the child.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    We can’t judge which selectors will work and which won’t, without a link to your website or CSS and HTML code.

    do a search for background:#fff; or similar.

    and use a a semi-transparent .png instead.

    Thread Starter ues2005

    (@ues2005)

    Thanks for all the help. Finally figured this out and given so many similar unanswered questions, I thought it would be good to post my solution.
    Via a child css:
    Set the background color as desired for #page

    The background for each of the following needs to be set to transparent: #main, #content, article.intro and ‘.featured-posts section.featured-post’

    {background-color: transparent;}

    The second two took a long time to find.
    article.intro controls the background color of pages created using WP.
    .featured-posts section.featured-post controls the background color of the featured post (go figure).

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Semi-transparent background for content’ is closed to new replies.