Home › Forums › WoodMart support forum › Different size background images for different screen resolutions?

Different size background images for different screen resolutions?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 27, 2020 at 2:06 pm #236578

    VCRShop
    Participant

    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

    October 27, 2020 at 8:56 pm #236649

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    October 28, 2020 at 12:29 pm #236801

    VCRShop
    Participant

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

    Image URL’s are in the private content section.

    October 29, 2020 at 7:52 am #236957

    Elise Noromit
    Member

    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

    October 29, 2020 at 12:56 pm #237058

    VCRShop
    Participant

    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.
    October 29, 2020 at 12:58 pm #237062

    VCRShop
    Participant

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

    October 29, 2020 at 4:08 pm #237110

    Elise Noromit
    Member

    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
Viewing 7 posts - 1 through 7 (of 7 total)