• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Mobile background image

Explorer ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

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

Views

1.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Aug 19, 2018 Aug 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 - n

...

Votes

Translate

Translate
Community Expert ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

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

2018-08-19_23-59-26.png

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

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

You are absolutely RIGHT !

I forgot to upload the image to the hosing server.

Thanks for coming to my rescue !!!

Have an awesome day  osogood

Thank you ! Thank you ! Thank you !

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Chanel+B  wrote

You are absolutely RIGHT !

I forgot to upload the image to the hosing server.

Thanks for coming to my rescue !!!

Have an awesome day  osogood

Thank you ! Thank you ! Thank you !

No problem - its all sorted now. I frequently forget pretty much everything BUT being as I've been doing this for some time I can usually take a few paces back, clear my mind and work through my silly errors. At times web-developing can twist you up in knots, especailly if you think something should be happening and it does not. It's certainly not for anyone who has no diligence or patience thats for sure.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

You're right, and I dont do this for a living, helping a friend.

Just started working in cPanel and am not used to uploading files this way, maybe I'm doing something wrong in there to. I used to just click the put button in Dreamweaver and all files get uploaded to the right path. Now I have to sign into cPanel and upload individual files. Need to keep focused and have a keen eye in this business.

Thanks again for your support !

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Chanel+B  wrote

You're right, and I dont do this for a living, helping a friend.

Just started working in cPanel and am not used to uploading files this way, maybe I'm doing something wrong in there to. I used to just click the put button in Dreamweaver and all files get uploaded to the right path. Now I have to sign into cPanel and upload individual files. Need to keep focused and have a keen eye in this business.

Thanks again for your support !

You can most likely benefit from having a stand alone ftp client like filezilla to upload files:

https://filezilla-project.org/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 19, 2018 Aug 19, 2018

Copy link to clipboard

Copied

LATEST

osgood_  wrote

You can most likely benefit from having a stand alone ftp client like filezilla to upload files:

https://filezilla-project.org/

Right.  I never use c-Panel for FTP.   Depending on the server, I use Dreamweaver,  Filezilla or terminal command.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines