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 juntobyob.com p/w = anderjuntotest

    Does anyone have any suggestions?

    Thanks!

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.

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

    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!

    Thread Starter andersonmultimedia

    (@andersonmultimedia)

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

    #homelogo {
    	position: absolute;
    	background-image:url("http://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?

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.