CSS: a combination of texture and color

Question

Does someone combine the use of a texture as a background image and the background color above this texture?

Here's the texture:

I want my body page to be like this:

I am struggling with backroung-image and background-color: http://jsfiddle.net/87K72/

body{ background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png'); } 

Answer 1

You can use an overlay div with an alpha channel on top of your body, but under your other elements.

JsFiddle example

 <h1>I want blue color above my texture</h1> <div id="cover"></div> body { background: url('http://i.stack.imgur.com/oslRB.png'); } h1{ position:relative; z-index:2; } #cover { position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(109,179,242,0.5); z-index:1; } 

Answer 2

It looks like your texture is missing an alpha channel here. It is not translucent, it is really white.

Answer 3

For this you need to use a translucent background texture; then your CSS directive will do the trick:

HTML:

 <h1>I want blue color above my texture</h1> 

CSS

 body { background: #6DB3F2 url('http://wizzley.com/static/img/bg/texture8.png'); } 

Example: http://jsfiddle.net/87K72/3/

Answer 4

You can use css opacity for this.

Create two divs - one for color and one for texture:

HTML:

 <div class="texture-color"> <div class="texture"> <h1> I want blue color above my texture</h1> </div> </div> 

CSS

 .texture,.texture-color { position: absolute; left: 0; top: 0; bottom: 0; right: 0; } .texture { background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png'); opacity: 0.8; } .texture-color { background-color: cyan; } 

jsFiddle

Answer 5

http://jsfiddle.net/uyrPA/3/

 body { width:auto; height:auto; background: green; } body:after{ content : ""; display: block; position: absolute; top: 0; left: 0; background: url(http://i.stack.imgur.com/oslRB.png) repeat; width: 100%; height: 100%; opacity : 0.5; } h1{ position:relative; z-index:2; }