WordPress.org

Forums

[resolved] When make content background opaque text is opaque too. (5 posts)

  1. Dashel
    Member
    Posted 11 months ago #

    hello, I am trying to make the background for the content ond other sections on a clients site opaque, but when i do it makes the text opaque too, i don't want that. the site is caleb.cheshirewebhosters.com and below is the code. for the css i changed.

    for the header

    #header {
    
         opacity: 0.7;
         background: url(images/gray-opaque.png) repeat;

    for the content and sidebar:

    #sidebar {
    	font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
             padding: 10px;
    
            opacity: 0.7;
             background: url(images/gray-opaque.png) repeat;
    #content {
    
            opacity: 0.7;
    	background: url(images/gray-opaque.png) repeat;
             padding: 0 10px 10px 10px;

    Hopefully someone can help.

  2. stephencottontail
    Member
    Posted 11 months ago #

    Instead of setting a background image and then using opacity (which affects all child elements), you could instead use rgba():

    #header {
    background: rgba( #222222, 0.7 );
    }

    You can use a site like Colorpicker to get the right hex code.

    This will work in pretty much every browser except for IE 8 and earlier.

  3. Dashel
    Member
    Posted 11 months ago #

    now the background disappears (what was opaque)

  4. stephencottontail
    Member
    Posted 11 months ago #

    My mistake, I forgot that you can't do that without a preprocessor. Instead of using a hex color code, you need to pass the RGB values like this:

    background: rgba(34,34,34,0.7);

    You can still use Colorpicker, but instead of the hex color code, instead check the three text boxes on the right side labeled "R:", "G:", and "B:". They must be entered in that order, and the final argument is a number between 0 (completely transparent) and 1 (completely opaque).

  5. Dashel
    Member
    Posted 11 months ago #

    Awesome! it worked! thank you :)

Reply

You must log in to post.

About this Topic