The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Transparency to the background image

  • # January 28, 2013 at 9:02 am

    Hi everybody,

    I am having a small problem while coding a homepage for a customer right now and it’s hopeless right now -.- So you are my last hope xD

    I want to have two areas, lets call them rightarea and leftarea, both have 50% width. Their background-images are different . But on top of these areas should be content-area, which I can divide into two 50%-width content areas.
    The background of the left area has a repeating background and on top of it, there should be a radial-gradiant with transparency, only to give the whole page a certain touch^^
    I want to do it with css to save up to 200kb while using a background picture.

    I’ll sum it up:

    leftarea | rightarea /
    background-image | background-image /
    transparency-layer | normal

    Maybe you can help me.


    # January 28, 2013 at 9:05 am

    This reply has been reported for inappropriate content.

    @Saifadin, can you put it into codepen?

    # January 28, 2013 at 9:12 am

    You can use multiple background images in CSS. You just need to make sure you get them in the right order.

    I see no reason why this should not work with an image and a gradient.

    # January 28, 2013 at 9:26 am

    Well i dont know why, but codepen cant show radial-gradient :/

    PS: my first time using codepen

    # January 28, 2013 at 9:46 am

    Let me ask the question in another way:

    How do I combine a radial-gradient (with transparency) and a background-image, so only in the transparent areas I can see the image at the background?
    Can anybody give me an exact syntax?

    # January 28, 2013 at 10:18 am

    I’m guessing something like this:

    # January 29, 2013 at 4:42 am

    thanks very much for the fast answer, I could solve it thanks to you :D

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed