• Resolved buelent

    (@buelent)


    Hello you genius people ??

    I am so happy to have this forum here. It’s just brilliant.

    But I couldn’t figure out the following issue by myself

    Is there a way to have the featured image in the Post stay fixed. So when I scroll down, I want the blog post to go over the Image.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi @buelent,

    Would you be able to provide a link to your site? We can then take a closer look at the specific code you’ll need.

    In addition: It sounds like you’re trying to set a background image that appears beneath all of your site’s content. Is that correct?

    Let me know those extra details and I can help from there.

    Thread Starter buelent

    (@buelent)

    Hey dear

    The link is https://www.visito.online

    Almost right. I’m trying to use the featured image of the post as a background, if you want to see it that way.

    Anyways, when you open the post, the image of the post shows up on top. Due to it’s size, you need to scroll down to see the text.
    I would like it more if the image stay where it is, and the text od the post comes to top and overlays the image. Of course I would have to need to change the color of the text in some posts.

    Hi there!

    Thank you for clarifying. ??

    You could move the text upwards so that it’s overlaying your featured image by first changing the image’s positioning with the following CSS:

    body.page .entry-thumbnail, body.single .entry-thumbnail {
        position: absolute;
        width: 100%;
        z-index: -1;
    }

    The above will push the content of your posts/pages to the very top. You can push it down a little further by adding some padding:

    .entry-content {
        padding-top: 110px;
    }

    If you don’t like the look of the text on top of featured image, you can add background: #FFF; to make the background a solid white:

    .entry-content {
        padding-top: 110px;
        background: #FFF;
    }

    Please don’t edit your theme’s files directly. To add custom CSS, you can activate Jetpack’s custom CSS module. (Alternatively, you can set up a child theme or activate a custom CSS plugin.)

    Let me know how you get on with that or if any extra questions come up.

    Thread Starter buelent

    (@buelent)

    You are awesome.

    It was not quite that what I was looking for, but that works for me.

    Thank you so much.

    You would’ve earned yourself a bunch of flowers.

    You’re most welcome! ?? You know where to find us if extra questions come up, too.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Feautured Image stays fixed while scrolling’ is closed to new replies.