Different size background images for different screen resolutions?

Hi,

I have been trying to use different background images for different screen resolutions but for some reason the images won’t show up. I have tried disabling/enabling the background for both mobile and tablet. But nothing seems to work.

Here’s my code for tablet (portrait):

@media screen and (min-width: 750px) and (max-width: 1100px) and (orientation : portrait){
	#warranty-complaints-top-row {
		background-image: url("https://vcrshop.com/wp-content/uploads/2020/10/warranty-complaints-background-image-tablet-portrait.png");
		background-size: cover;
		background-repeat: no-repeat;
	}
}

Am I doing something wrong? Please let me know

Hello,

Please provide the range of widths of each device and image URL for each width.

Best Regards

750px> Mobile
750px-1100px Tablet
1100px> Other resolutions

Image URL’s are in the private content section.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media screen and (min-width: 750px){
#responsive_title_row {
		background-image: url("https://vcrshop.com/wp-content/uploads/2020/10/warranty-complaints-background-image-tablet-portrait.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position:center;
	}
}
@media screen and (max-width: 1100px){
#responsive_title_row {
		background-image: url(https://vcrshop.com/wp-content/uploads/2020/10/warranty-complaints-background-image-tablet-portrait.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position:center;
	}
}

Best Regards

Hi Elise, the CSS you gave me result in the following changes (see attachments).

Probably because the ID’s don’t match up.

Attachments:

You must be logged in to view attached files.

Even if I match the ID’s, the background still won’t show up

Hello,

I thought you wanted to the next row, but it does not matter, the reason the image did not show was the row set, you have set disabling image background: https://prnt.sc/v9hzua

Please remove all the CSS I have provided and insert this one:

@media screen and (min-width: 750px){
#warranty-complaints-top-row  {
		background-image: url(https://vcrshop.com/wp-content/uploads/2020/10/warranty-complaints-background-image-tablet-portrait.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position:center;
	}
}
@media screen and (min-width: 1100px){
#warranty-complaints-top-row  {
		background-image: url(https://vcrshop.com/wp-content/uploads/2020/10/warranty-complaints-background-image-tablet-landscape.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position:center;
	}
}

Best Regards

[Author]

Posts