image in front of page

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).

Warmly,
Brad

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.

Cheers
Ash

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.
Warmly,
Brad

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

Thanks!

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

Thanks esmi, I just did that here.