Stretch header background to 4K

Hi there,

this is not a pressing issue yet, but while 4K monitor will become more and popular and achievable, it might become so.

The header background of Sparkling is not stretched to the screen width yet. I recently got a 4K Monitor and now see those unfortunate blank spaces to the right and left of the header background. I could use a larger image but that would take it’s toll on load time.

Is there any modification availabele to make the image stretch to the current screen size?

Best regards,
George

Hi George,

I hope you are well today and thank you for your question.

Could you please share me the screenshot of the issue so that i can troubleshoot it and help you to resolve it?

Kind Regards,
Movin

Hi Movin,

yes, of course. Find the screenshot of such a homepage attached. It was taken on a 4K monitor. You can see the white blocks to the left and right of the header image.

If you have a 4K monitor, you can also check it out live at www.lewe.com.

The images I use for that background slider are all 1920*551 pixels in size.

Best regards
George

I could use a larger image but that would take it’s toll on load time.

Yes you have to use slider images larger in width to achieve this.

Is there any modification availabele to make the image stretch to the current screen size?

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path but please note that this will stretch image to full width.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS


#page .flexslider .slides img {
    width: 100%;
}

Hi Movin,
thanks a bunch. Excellent. The stretching works. Larger images is also a solution I will consider.
Best regards,
George

You are most welcome here :slight_smile: