Wordpress 主题二十七 - 4k 显示的标题图像

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.

Answer 1

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);