Overlay a background image onto the web page

[Glenn Geiger]

I’d like to add an image to the web page down the y-axis. This image would need to repeat, so I thought a background image would work best. As you’d expect I’m having trouble telling the CSS how tall the page is, especially with dynamic content from WordPress.

I put together a quick fiddle to help explain: http://jsfiddle.net/15wc2noe/

Currently, unless I give the absolutely positioned DIV a specific height, it won’t travel down the full length of the page.

The goal is to get the repeating image to follow down the y-axis of the page to the bottom, without hard coding the height.

[Paulie_D]

Firstly you might want to think about changing your forum name to something other than your email address…otherwise you’re leaving it out there for everyone to see.

[Paulie_D]

Are you trying to do this –
http://jsfiddle.net/15wc2noe/3/

Do you really want the image to overlay content…that seems counter-intuitive.

So I’ve just made the image a background to the body.

[Glenn Geiger]

Thanks, Paulie. I wasn’t aware my email address was also my forum name, but then why did you write it again?

Yes, I really want the image to display over the content. I can’t simply change the alpha of the content.

Any other ideas out there?

[Paulie_D]

but then why did you write it again?

It’s so that the forum sends you an email to let you know you’ve been mentioned.

Now that that’s been achieved I’ve removed it.

Yes, I really want the image to display over the content. I can’t simply change the alpha of the content.

You can do that:

http://codepen.io/Paulie-D/pen/YPWzGB

BUT there’s a problem…without pointer-events:none on the overlay your content is unclickable.

You can make the content clickable by enabling that property but that limits you to modern browsers and IE11 ONLY.

http://caniuse.com/#feat=pointer-events

[Paulie_D]

As an alaternative, you could cover just part of the screen…and add padding to the content sections(so that the image doesn’t actually cover any content and thus the problem above doesn’t come up).

I’ve added a slight grey bg to the image area so you can see it working

http://codepen.io/Paulie-D/pen/VYjjdO

[LewisCowles1986]

I used position fixed
http://jsfiddle.net/LewisCowles1986/o78ycq16/

although if I had to add this myself I would try this
http://jsfiddle.net/LewisCowles1986/gt1k2rgv/

N.b.: I would also tidy up the image to make it work for the content

[Author]

Posts