Docs

[mollyb2121]

It is kind of ridiculous that no one can give me an answer of how to make my background image fit on a mobile screen. I paid for this theme and service, and it should be able to me mobile responsive with out having to contact a developer.

theglassslipperllc.com

[Rahul]

Hey There,

Thank you for writing in!

You can check by adding the following code to Customizer > Custom > CSS and seeing if this works for you:

.x-content-band.bg-image {
   background-size: 100% auto;
}

Hope this helps. If you face any issue, please let us know. We’ll be happy to assist.

Thank you.

[mollyb2121]

that did not work

theglassslipperllc.com

[mollyb2121]

it just band a white band on top..

[Jade]

Hi there,

Please try this code:

@media (max-width: 979px) {
    .x-main.full {
        margin-top: 0;
    }
}

Hope this helps.

[mollyb2121]

1. This still does not work. On my phone it looks like this..

[mollyb2121]

1. This still does not work. On my phone it looks like this..

theglassslipperllc.com

[Friech]

Hi There,

That is because you can not force a background-image to be fit on all screen sizes. Please read the posts below how background-size works.

– https://community.theme.co/forums/topic/section-background-image-2/#post-691126

– https://community.theme.co/forums/topic/background-image-on-phone/#post-780991

Please prepare a portrait oriented version of the background-image, and use the custom CSS below to switch the background-image when the page is viewed on mobile.

@media (max-width:  480px) {
	.home #x-section-1 {
		background-image: url(PORTRAIT BG_IMAGE URL HERE) !important;
	}
}

Thanks.

[mollyb2121]

What would I do after I make the portrait photo?

[Rupok]

Hi there,

That’s already said in step by step. Kindly use the code and place your uploaded image URL to replace “PORTRAIT BG_IMAGE URL HERE”.

Hope this makes sense.

[mollyb2121]

Can you possibly tell me why my product pages is looking messed up?

theglassslipperllc.com

[mollyb2121]

This code
@media (max-width: 480px) {
.home #x-section-1 {
background-image: url(PORTRAIT BG_IMAGE URL HERE) !important;
}
}

did not work for me, do I need to just keep resizing the photo to small and vertical for the code and url to work on a mobile phone?

thanks for the help!

theglassslipperllc.com

[Friech]

Hi There,

I see you have the image URL as this:

background-image: url([URL=http://s1243.photobucket.com/user/mbrust2121/media/mobile_zpssfx2fibd.jpg.html][IMG]http://i1243.photobucket.com/albums/gg555/mbrust2121/mobile_zpssfx2fibd.jpg[/IMG][/URL]) !important

Three issues about that, actually four if you consider hot linking an issue.

First, that is not a direct URL. That is a Photobucket shortcode. Second even if you directly access the image URL (http://i1243.photobucket.com/albums/gg555/mbrust2121/mobile_zpssfx2fibdz.jpg) it is not accessible, so do not hotlink this image on Photobucket and upload it directly on your media library. Third your current portrait image is small, so it looks blurry when apply as a background on the section. Make it larger with an aspect ratio of 4:3 (e.g. 768 x 1024).

Thanks.

[Author]

Posts