CODEWITHSUNDEEP
htmlcss
Chipe
Chipe

Reputation: 4811

How do you set background-color rgba on the body with background-image also?

How would I go about setting the rgba of the body along with a background image? I want the rgba to show up on top of the background image and stay there. A transparent color on top of the image Here is my css:

body{
 background:url(image.jpg) no-repeat center center fixed; 
 background-size:cover;
 background-color:rgba(255,0,0,0.5);
}

fiddle example: http://jsfiddle.net/zt6sfs21/

Upvotes: 1

Views: 2991

Answers (3)

maťo
maťo

Reputation: 1302

If you want have an image overlaid color, you have to use another element to the fore. Here is example:

CSS:

html{
    height:100%;
}
body{
    background:url(http://upload.wikimedia.org/wikipedia/commons/d/d3/Nelumno_nucifera_open_flower_-_botanic_garden_adelaide2.jpg) no-repeat center center fixed; 
    background-size:cover;
    margin:0;
    height:100%
}
.content{
    height:100%;
    background-color:rgba(255,0,0,0.5);
}

and html:

<div class="content">
    [other elements]
</div>

http://jsfiddle.net/vv17uc16/

edit: yop, Fabio was first...

Upvotes: 0

Devin
Devin

Reputation: 7720

ah, you weren't explaining yourself, I think what you're looking for is this:

add this HTML on top of your body:

<div class="overlay"></div>

and then this CSS

body {
    background:url(http://upload.wikimedia.org/wikipedia/commons/d/d3/Nelumno_nucifera_open_flower_-_botanic_garden_adelaide2.jpg) no-repeat center center fixed;
    background-size:cover;
}
.overlay {
    background-color:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
}

see fiddle here

You could do the same applying a full background to the body and then using the image as a background for .overlay div, then apply an opacity:0.5 property (or whatever). Of course this approach would apply for your situation were you're using full body width and height, but you could also use a div or whatever element with any size

Upvotes: 2

Quentin
Quentin

Reputation: 943759

See the specification:

Name:   background
Value:  [ <bg-layer> , ]* <final-bg-layer>

and

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

Just specify the background colour along with the other properties.

 background:url(image.jpg) no-repeat center center fixed rgba(255,0,0,0.5);

Upvotes: 5

Related Questions