locked
External Style Sheet - Background-image opacity RRS feed

  • Question

  • User1389508859 posted

    Hello,

    I am using an External Style Sheet and would like to apply an image background to my webpage. The problem is that I am very new to this (I'm a student, second week into the class). My assignment is done and at this point I am just kind of playing/exploring.

    I am able to apply the image, but I would like to make it more transparent/faded. I tried using the 'opacity' property in the body{} section of my .css file, however this faded the whole thing (text and all!) not just the image. Is there a simple way to apply this only to the background image? I don't have my program available, however I believe I had something like this going on:

    (in StyleSheet.css)

    body
    {
    background-image: url(pic.jpg);
    background-repeat: no-repeat;
    opacity: .4;
    }

    Haven't had much luck on the Google side of things, so I thought I'd give this forum a shot.

    Thank you for reading.

    Wednesday, August 28, 2013 9:47 AM

All replies

  • User2103319870 posted

    Opacity applies to an element and all its children as a whole. Therefore when you make an body background transparent,The element and all its children are drawn on the page and then the whole lot is made transparent.

    One suggestion is to make the background image transparent using some photo editing tools and then apply that faded image to your back ground.

    Wednesday, August 28, 2013 10:22 AM
  • User1389508859 posted

    One suggestion is to make the background image transparent using some photo editing tools and then apply that faded image to your back ground.

    I thought of that but I was hoping there was a way to alter the image itself within the .css body{} properties. I did see a way to do this internally with img src, in which case you just embed the opacity within the declaration but, like I said, I'm utilizing an external style sheet.

    Wednesday, August 28, 2013 11:01 AM