Float a large image in front of page content

There’s probably several ways. Here’s one idea:
Create a div and style it to be position absolute, give it the image width and height, and top:45%; left:45%; (or something to help center it) and use a css background image. The problem with this approach is as the viewport changes, so does the position of the absolutely positioned div (becuse its position is based on either a parents set position if it has it or to the body tag).

Another possibility would be to have a div overlay with your image in the center (position:absolute; top:0; bottom:0; left:0; right:0;) and then add in some javascript to hide the div once clicked so users can interact with the content below.

Hi @bemdesign. I can probably implement your first suggestion, but I think your second suggestion is a better solution for what I’m attempting to do. Is a div ‘overlay’ a special kind of div?? Could you advise me on the javascript? Thanks!

I added
<div id="homelogo"></div>
to the homepage content text view.
And

#homelogo {
	position: absolute;
	background-image:url("https://www.juntobyob.com/wp-content/uploads/2014/03/junto-large-logo.png");
	height:45%;
	top:45%;
	left:45%;
}

to my style sheet, but there’s no sign of the logo on my home page. Am I doing something wrong?

This may be helpful: https://tympanus.net/codrops/2013/11/07/css-overlay-techniques/