WordPress.org

Ready to get started?Download WordPress

Forums

image in front of page (9 posts)

  1. bantin
    Member
    Posted 5 months ago #

    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?

    Thanks

  2. bcworkz
    Member
    Posted 5 months ago #

    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.

  3. bantin
    Member
    Posted 5 months ago #

    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

  4. Ashok
    WPMU DEV Support Staff
    Posted 5 months ago #

    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

  5. bcworkz
    Member
    Posted 4 months ago #

    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.

  6. bantin
    Member
    Posted 4 months ago #

    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

  7. andersonmultimedia
    Member
    Posted 4 months ago #

    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!

  8. esmi
    Forum Moderator
    Posted 4 months ago #

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

  9. andersonmultimedia
    Member
    Posted 4 months ago #

    Thanks esmi, I just did that here.

Reply

You must log in to post.

About this Topic

Tags