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.
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?
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
@Saifadin, can you put it into codepen?
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.
Well i dont know why, but codepen cant show radial-gradient :/
http://codepen.io/Saifadin/pen/xagCF
PS: my first time using codepen
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?
I'm guessing something like this: http://codepen.io/anon/pen/yiDBq
thanks very much for the fast answer, I could solve it thanks to you :D