CODEWITHSUNDEEP
jqueryhtmlcssimageoverlay
JoeriSmits
JoeriSmits

Reputation: 254

Image overlay HTM/CSS

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

Answers (3)

asad mohd
asad mohd

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

Tiago Marinho
Tiago Marinho

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>

JSFiddle

Upvotes: 1

royhowie
royhowie

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

Related Questions