CODEWITHSUNDEEP
htmlcss
Joshua
Joshua

Reputation: 15510

Overlaying a Image over a whole web page

Is it possible to overlay a repeating image over a entire web page? If so, How?

Upvotes: 1

Views: 14239

Answers (2)

Shashank Surwase
Shashank Surwase

Reputation: 63

You can't click any of the elements on your page cause you are covering the entire page with a <div>, so all your elements get hidden behind that <div>.
However, you can 'apply the tint' to your body background in this manner -

.body{background-image: url("overlay image"), url("your bg image");}

Make sure your overlay image has appropriate transparency to it.

Upvotes: 1

graphicdivine
graphicdivine

Reputation: 11211

Something like this:

HTML

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

CSS

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("image.png") repeat;
}

You probably want to put the div at the very end of the html to ensure it's above everything else on the page, alternatively you could use z-indexing.

Upvotes: 6

Related Questions