Problem with rendering of header image

  • Author
    Posts
  • #108950

    brightbricks
    Member

    Hi,

    I have set the header image to 1800 x 600 but the image does not render properly, it is cutting off the edges of my image as well as cutting off text I have placed at the bottom.

    I have tried a number of variations in size but none of them seem to be rendering properly and I am getting different results with different laptops and pcs.

    The blog I need help with is brightbricks.wordpress.com.

    #109065

    rezzap
    Staff

    Hello!

    The reason why the image is getting cut off is because it is set as a background giving you the scroll over effect. This means it adjusts based on the size of the display rather than on the size of the image. The best way to make sure the image remains consistent is to remove the scroll over effect with the following CSS:

    .page-banner, .feature-img.page-banner {
        background-attachment: scroll;
    }

    Of course this means the effect no longer takes place, but it sets the image better.

    Thanks,

    Rebecca

    #109101

    brightbricks
    Member

    Thank you very much, that worked perfectly.

    I have one more question, is there a way to hide the header text overlay on the header/featured image?

    Thank you in advanced.

    #109107

    rezzap
    Staff

    Hello!

    Yes, you can use the following CSS to hide the text overlay on the featured images:

    .banner-content .headline.img-headline {
        display: none;
    }

    Let me know if that’s not what you were looking for or if it’s not working for you.

    Thanks!

    Rebecca

    #109117

    brightbricks
    Member

    That was exactly what I needed and it worked perfectly.

    Thank you!

    #109119

    rezzap
    Staff

    Glad to hear! :)

    Cheers,

    Rebecca

The topic ‘Problem with rendering of header image’ is closed to new replies.