Support » Fixing WordPress » Float a large image in front of page content

  • I’m looking for a way to float a large centered image (a transparent logo png) over / in-front of a responsive layout on my site’s homepage.

    The site I’m working on is p/w = anderjuntotest

    Does anyone have any suggestions?


Viewing 4 replies - 1 through 4 (of 4 total)
  • 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.

    #homelogo {
    	position: absolute;

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Float a large image in front of page content’ is closed to new replies.