Grow your CSS skills. Land your dream job.

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

    Osamah

    # January 28, 2013 at 9:05 am

    @Saifadin, can you put it into [codepen](http://codepen.io “”)?

    # 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 :/

    http://codepen.io/Saifadin/pen/xagCF

    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: http://codepen.io/anon/pen/yiDBq

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

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