Skip to main content
Sandra Dolcezza
Known Participant
August 19, 2018
Answered

Mobile background image

  • August 19, 2018
  • 2 replies
  • 2056 views

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

This topic has been closed for replies.
Correct answer osgood_

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

2 replies

Legend
August 19, 2018

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.

Sandra Dolcezza
Known Participant
August 19, 2018

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.

osgood_Correct answer
Legend
August 19, 2018

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

BenPleysier
Community Expert
Community Expert
August 19, 2018

The background image is still there, it does not show because of the foreground div which is entirely different in larger sized clients.

This is the image on larger screens

and this one on smaller screens

Change the size of the div and change the background of the div to part transparency.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Sandra Dolcezza
Known Participant
August 19, 2018

Hi Ben,

Thanks for your reply,

I tried changing the size and transparency of the div as you suggested, unfortunately nothing changes.

According to this link it seems to have something to do with the image I'm using... does this make any sense to you ? I tried changing the image size but I still cant get it to work

When I preview it on chrome / inspect / before uploading the CSS, it seems to work fine.

Sandra Dolcezza
Known Participant
August 19, 2018