Support » Plugins » Hacks » image in front of page

  • I’m looking for a way to add an image to the front of my website.

    I have an image that’s like a picture frame with a transparent center. I’d like a way to put it on top of my site such that the site contents (text blocks, images, videos, etc.) scroll behind it. It would be kind of like looking at the site through a window.

    The frame would be fixed like a background image, but the content of the page would scroll behind it.

    Any ideas?


Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator bcworkz


    You actually will want to make this frame a fixed background image. Even though it is conceptually wrong, graphically it will still appear to be on “top”. Then you don’t even need to worry about maintaining a transparent area, the content running on top of the background frame will obscure anything that might be present where the transparent area currently is.

    The key to this illusion is creating a DOM container whose edges correspond exactly to the supposed inside edges of the frame. It’s CSS properties include it being in a fixed position just like the frame, overflow hidden, and scroll bars visible on overflow. All of your site’s “normal” content is placed inside of this DOM container. It becomes the actual “window” through which content is seen. The background frame image just supports the illusion.

    Thanks, bcworkz.

    Part of the “illusion” I’m trying to create also includes a background image which is set for full screen. My “frame” is less than full screen.

    If I did what you suggest, and incorporate my “frame” into the background image, would that work?

    Also, Does this DOM container affect the responsiveness (for mobile users) of the site?

    And finally, is this going to be possible within my theme? I use OptimizePress (which does have a way for me to enter custom css?

    Thanks for the reply (ies).




    Just an idea here –

    You need to use this form as DOM element / html. Then use position : fixed in css so that the element remains strict. It would be better if you can use javascript to set the correct left value to make the image center.

    Also, I think it will affect the responsiveness. In that case, you can create multiple frame and use conditional device oriented css to show correct frame in correct device.


    Moderator bcworkz


    Combining frame image and background will work if both are fixed. If the background scrolls, you’ll need to put the frame image in a DOM container, which will also work, it can still be a background, just not that of the entire body.

    Ashok pretty much covered the responsiveness issue. Unless the frame graphics are of a particular nature, this isn’t an ideal concept for responsive design. Still, you can get it to work.

    As for working with your theme, I’ve no idea. On one hand, you can make almost anything work if you want it bad enough. But ideally, you want a clean hack that persists through theme updates. If this is possible depends on many things. If you can create a child theme, you have a very good chance. If your theme is already a child theme, and/or it has obfuscated code, things look less promising.

    Thanks, Ashok and bcworkz:

    Your suggestions are appreciated. I think they’re a little too far above my skill level, so I’ll have to do some more research or find someone who can just tell me the code. I can usually figure out how to adjust stuff once I find it, but I’m not a coder.

    Thanks again for your suggestions.

    I’m trying to do the same thing… a large centered logo over a responsive layout on the WP site’s homepage. I have no idea how to create a DOM container. Ashok & bcworkz could you elaborate please? Have you found another solution bantin?

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




    Forum Moderator

    @andersonmultimedia: If you require assistance then, as per the Forum Welcome, please post your own topic.

    Thanks esmi, I just did that here.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘image in front of page’ is closed to new replies.