WordPress.org

Support

Support » Themes and Templates » [Resolved] When make content background opaque text is opaque too.

[Resolved] When make content background opaque text is opaque too.

  • Dashel
    Member

    @dashellathers

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • stephencottontail
    Moderator

    @stephencottontail

    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.

    Dashel
    Member

    @dashellathers

    now the background disappears (what was opaque)

    stephencottontail
    Moderator

    @stephencottontail

    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).

    Dashel
    Member

    @dashellathers

    Awesome! it worked! thank you 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] When make content background opaque text is opaque too.’ is closed to new replies.