Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: Combine Texture and Color

Tags:

html

css

someone how to combine Texture use as background-image and Background-color above that texture ?

Here the texture :

Texture alone

I want my body background page to be like this :

enter image description here

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

body{
  background: #6DB3F2 url('http://s13.postimg.org/j0qiscsw3/cream.png');
 }
like image 709
Rollyng Avatar asked Aug 07 '13 14:08

Rollyng


2 Answers

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;
}
like image 103
j08691 Avatar answered Oct 24 '22 09:10

j08691


It looks like your texture here lacks an alpha channel. It's not semi-transparent, it's really white.

like image 1
Miklos Aubert Avatar answered Oct 24 '22 08:10

Miklos Aubert