Wordpress Theme Twenty Seventeen - Header image for 4k display

Question

I'm currently working on a wordpress blog using the standard Twenty Seventeen theme. When setting a custom header image, the maximum width of the uploaded header image that is shown on any display is 2000px (larger images are resized). This, however, looks quite ugly on a 4k screen. Is there a possibility to allow for larger images when the browser width is larger than the 2000 pixels? My source image has a size of 6000 x 4000 pixels.

I appreciate your help.

Wordpress apparently resizes the image once it is uploaded and then uses the resized image as header image. "cropped-DSC07020.jpg". — Peter
I recall a "SKIP" option when prompted to crop the header image. Skipping should retain the original image dimensions — Duane Lortie
Sadly, in this case there is no option to skip the cropping of the image. — Peter

Arkay Arkay · Accepted Answer · 2017-09-03T10:37:06

You could use jQuery conditions mixed with url and if statements to achieve this you could use $(window) functions like below then you could store the image location to a variable and pass it in is the property value to change the background depending on the screen size eg:

var width = $(window).width(); 
var height = $(window).height(); 

if ((width >= 1024  ) && (height>=768)) {
     $url = 'http://mywebsite.com/files/myfile.jpg'
}
else {
     $url = 'http://mywebsite.com/files/default.jpg'
}

Then use the jQuery .css method to change the background image of the body or div you want to change for the screen size eg:

$('#myDivId').css('background-image', url);

Wordpress Theme Twenty Seventeen - Header image for 4k display

1 Answers