Reputation: 254
I am looking for a solution to get an overlay like the image below using HTML/CSS or jQuery or any other solution.
I want to use it on my website as an overlay for a background image.
The overlay: Image
Upvotes: 1
Views: 1867
Reputation: 181
Use the following
* {
margin:0;
}
body {
background:url("http://www.conceptcarz.com/images/Citroen/2010-Citroen-Survolt-Concept-Image-01.jpg");
background-attachment: fixed;
background-position: center;
}
.bg-transparent {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background: #fff;
opacity: 0.4;
filter: alpha(opacity=40)
}
<div class="bg-transparent"></div>
Here you can find a fiddle: http://jsfiddle.net/erasad22/evc8x9hk/
Upvotes: 0
Reputation: 2226
To recreate the same effect as in the picture you can use a little 2 x 2
pixels PNG image that has 3 transparent pixels and 1 fully opaque black pixel (You can use the image that I've used in the following code). Then you put this image in a div
that will overlay the background image and apply transparency to it (the overlay image):
Here's the CSS:
* {
margin:0;
}
html, body {
background:url("http://i.imgur.com/TBaaZJC.png");
}
.overlay {
position:absolute;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
opacity:0.25;
background:url("http://i.imgur.com/pVNSmP4.png");
}
Here's the HTML:
<div class="overlay"></div>
Upvotes: 1
Reputation: 11171
If you want to set that as the background for your website, it's as simple as writing it in the CSS file as:
html {
background-image: url(http://oi61.tinypic.com/14o3c3k.jpg)
}
or setting it via jQuery (you tagged your question with jQuery, so I assume you want to know how to do it that way)
$("body").parent().css("background-image", "url(" + http://oi61.tinypic.com/14o3c3k.jpg + ")")
//you can also use $("html")… I've just seen cases where that failed for people
Upvotes: 1