Mobile background image

Question

Hello,There is something very weird happening, the background image doesn't want to show up, although when I change the image for a different one, some images show up and others dont. (not changing anything in the code, only the image)I tried resizing the image,  but nothing seems to be working.Does anyone know what's going on here ?Thanks so much for your support !Residential Cleaning Services in Montreal

osgood_ · Accepted Answer

https://forums.adobe.com/people/Chanel+B wrote
Hi Osgood !
Thanks for stopping by to help.
Its weird that you dont see the image in the file, as I did upload it and direct link to the file.

Nothing weird at all - the mobile (perfect_clean.png) image is surely not uploaded to where the link says it is.

If you have uploaded it check that the name is exactly the same as that in the link, naming is case sensitive.

If you copy the link below and try to access it in your browser it will return an error - not found

https://geniux.ca/images/Mobile_images_eng/perfect_clean.png

Desktop image is fine:

https://geniux.ca/images/Residential_house_cleaning_3.jpg

On closer inspection I suspect you have uploaded the mobile image to the 'images' folder and not the 'Mobile_images_eng' folder which is inside the 'images' folder?

https://geniux.ca/images/perfect_clean.png

osgood_ · Answer

There's no image file uploaded to the folder the background link says it should be at:

https://geniux.ca/images/Mobile_images_eng/perfect_clean.png

Mobile css:

.resMain {/*background-size: cover; with fixed have issues */

height: 525px;

background-image: url(../images/Mobile_images_eng/perfect_clean.png);

background-repeat: no-repeat;

background-position: center bottom;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

border-top-width: thin;

border-top-style: solid;

border-top-color: #36353B;

border-bottom-width: thin;

border-bottom-style: solid;

border-bottom-color: #36353B;

margin-top: 10px;

clear: both;

float: left;

width: 100%;

}

If you experience issues such as this in the future open the devtools in your browser....Firefox>Tools>Web Developer>Inspector

Reduce the page to mobile size and click on the container you wish to inspect. That should bring up the css associated with the container. If you then click on the background image link associated with the container you will get a 404 error - file not found.

You can even test by adding a temporary background image to the container using the 'element' faciity in the inspector, if you do add a test background image you'll see it appears.

Hope that helps.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded