When make content background opaque text is opaque too.

  • Resolved Dashel

    (@dashellathers)


    9 years, 9 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.

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

    (@stephencottontail)

    9 years, 9 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.

    Thread Starter Dashel

    (@dashellathers)

    9 years, 9 months ago

    now the background disappears (what was opaque)

    stephencottontail

    (@stephencottontail)

    9 years, 9 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).

    Thread Starter Dashel

    (@dashellathers)

    9 years, 9 months ago

    Awesome! it worked! thank you 🙂

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