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 !
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
...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
Change the size of the div and change the background of the div to part transparency.
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.
Copy link to clipboard
Copied
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.
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.
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?
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 !
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.
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 !
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:
Copy link to clipboard
Copied
osgood_ wrote
You can most likely benefit from having a stand alone ftp client like filezilla to upload files:
Right. I never use c-Panel for FTP. Depending on the server, I use Dreamweaver, Filezilla or terminal command.