Row background image not showing in mobile browser served from wamp local host

Question

I am developing a website using wampserver on localhost and I am trying to view my site on mobile on my local network.

I changed the home and site URL in Settings > General from

http://localhost/site/wordpress

To

http://ip/site/wordpress

I also used the velvet blues URL plugin to update my images etc. from localhost to my ip.

All of my images across my site will display on mobile except for the homepage background row images. I have checked the URL in chrome developers tools and the URL path is the same as the images that are displaying. I'm at a loss as how to proceed.

Any help would be great.

Answer 1

Relative paths act differently when they are used in a CSS file. The behavior is still the same, and the path is still relative, but to a human it might seem confusing.

When you use a path like this for your image:

<img src="/path/image.jpg"/>

The browser will look inside the path folder, located at the root of the current web. But when you use the very same value inside your CSS:

background-image: url( '/path/image.jpg' );

The story is different. The browser will look inside the path folder, based on where the stylesheet is located, not the current URL. So, if the stylesheet is located at:

www.example.com/wp-content/themes/twentyseven/

Then browser will look for:

www.example.com/wp-content/themes/twentyseven/path/image.jpg

Which doesn't exist. So it's important to build your CSS paths relative to the stylesheet's path.

For a further understanding, have a look here.

Answer 2

The problem wasn't with the img src or background-image url, it was with Apache and the firewall. I'm still not sure why, but when I changed the http.vhosts.config file and refreshed wamp server and then turned off the firewall settings for Wamp, the images are viewable. If I did it the other way around changing the firewall and then Apache, the images weren't viewable.