0

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.

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.

  • Just to clarify: if background-image url (ip/site/wordpress/wp-content/uploads/2017/06/image.jpg) and my style sheet is at C:\wamp64\www\site\wordpress\wp-content\themes\theme\style.css do I need to create file path C:\wamp64\www\site\wordpress\wp-content\themes\theme\site\wordpress\wp-content\uploads\2017\06\image.jpg ? – Bravo Foxtrot Aug 15 '17 at 16:51
  • No. First enter ip/site/wordpress/wp-content/uploads/2017/06/image.jpg in your browser, and see if it opens. If it did, you might want to wrap the URL in '' like background-image url('URL') or add http:// before ip. – Jack Johansson Aug 15 '17 at 17:08
  • I put that path in a browser and it opens. In dev tools it has http:// before the ip but it is not wrapped in quotes. Despite lack of quotes background images display on my localhost website but not mobile. Thanks. – Bravo Foxtrot Aug 15 '17 at 17:27
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.