Grow your CSS skills. Land your dream job.

Single Pixel Image

  • # April 12, 2013 at 3:41 pm

    I’m looking to make the background of a div transparent, without affecting child elements, by using an opaque single pixel image to fill the div, instead of making all elements in the div opaque using CSS. I seem to be having a bit of trouble getting it to work and want to be sure I understand the background syntax correctly.

    `background: url (“/images/example.png”);`

    If I don’t specify a repeat x or y then the image will automatically repeat to fill it’s container, correct?

    # April 12, 2013 at 3:55 pm

    just dont set a background

    # April 12, 2013 at 4:17 pm

    Except I want some sort of background. Here is the website I’m referring to:

    http://sc30.sawyerwebworks.com/

    I’m looking to make the box on the left side of the slider opaque, so that some of the background image of the slider image can be seen through, but not so much that the text becomes difficult to read. It seems the best way to do that is through a repeating single pixel image. Which goes back to my original question, above.

    # April 12, 2013 at 4:38 pm

    > If I don’t specify a repeat x or y then the image will automatically repeat to fill it’s container, correct?

    Correct.

    You can also just do

    background: rgba(255,255,255,0.5);

    Or whatever color you want!

    # April 12, 2013 at 5:25 pm

    The doc is right here

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