Transparency to the background image

[Saifadin]

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

[Paulie_D]

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.

[Saifadin]

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

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

PS: my first time using codepen

[Saifadin]

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?

[Paulie_D]

I’m guessing something like this: http://codepen.io/anon/pen/yiDBq

[Saifadin]

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

[Author]

Posts