Grow your CSS skills. Land your dream job.

CSS Stylesheet: opacity

  • # February 20, 2012 at 12:57 pm

    I’m building my website in wordpress. I want to transparent the background for 50%. When I type down the code in css, it’s making the background fully transparent. What am i doing wrong?

    This is the code:

    #navi {
    float: left;
    background: #111111 opacity: 0.5;
    width: 550px;
    height: 40px;
    font-family: Menlo;
    font-size: 1.2em;
    padding: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;

    # February 20, 2012 at 1:14 pm

    It’s not giving you a background at all – because it’s throwing an error (a simple validation would show you). The opacity property should be separate from the background (ie place a semi-colon after background value).

    Note however, that using opacity will affect not only the background but everything in #navi as well (text, etc). To accomplish your goal use an rgba or hsla value for the background property.

    # February 20, 2012 at 1:16 pm

    You need to change background: #111111 opacity: 0.5;
    to background: rgba(17,17,17,0.5);
    I recommend making the background a semi-transparent png image for a fallback for browsers that don’t support RGBa/HSLa.

    # February 20, 2012 at 3:31 pm

    Thx. Yeah, i know, but i don’t know where to put the image. I’m not really familiar with php

    # February 20, 2012 at 5:00 pm

    PHP?

    background: rgba(17,17,17,.5) url(path/to/image.png) center no-repeat;

    edit: My fault. I misread the above conversation.

    Anonymous
    # February 20, 2012 at 11:10 pm

    If you want the image stretched to fit the resolution of the browser, I suggest taking a look at: http://srobbin.com/jquery-plugins/jquery-backstretch/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".