css - Images loaded as background-image are shown but <img>s aren't

I got a weird problem: First of all I provide my folder structure:

 wp-content/themes/theme
    ├──content.php
    ├──footer.php
    ├──functions.php
    ├──header.php
    ├──home.php
    ├──index.php
    ├──page.php
    ├──main.js
    ├──style.css
    │
    ├── media/
    │   └── img/
    │       ├── beach.mp4
    │       ├── contact-1.jpg
    │       └── offers-1.jpg
    │
    └── scripts/
        └── map.js

So, in my style.css I defined a background image like this:

background-image:url('media/img/offers-1.jpg');

That get's shown perfectly, but whatever file I load from my index.php (which loads content.php) won't get found, i.e. I got a normal image like this

<img src="media/img/contact-1.jpg">

which doesn't get found with the following error:

GET http://url/newer/media/img/contact-1.jpg 404 (Not Found)

Same for map.js, main.js and some other images.

Does anyone know what I may did wrong?

I got a weird problem: First of all I provide my folder structure:

 wp-content/themes/theme
    ├──content.php
    ├──footer.php
    ├──functions.php
    ├──header.php
    ├──home.php
    ├──index.php
    ├──page.php
    ├──main.js
    ├──style.css
    │
    ├── media/
    │   └── img/
    │       ├── beach.mp4
    │       ├── contact-1.jpg
    │       └── offers-1.jpg
    │
    └── scripts/
        └── map.js

So, in my style.css I defined a background image like this:

background-image:url('media/img/offers-1.jpg');

That get's shown perfectly, but whatever file I load from my index.php (which loads content.php) won't get found, i.e. I got a normal image like this

<img src="media/img/contact-1.jpg">

which doesn't get found with the following error:

GET http://url/newer/media/img/contact-1.jpg 404 (Not Found)

Same for map.js, main.js and some other images.

Does anyone know what I may did wrong?

• css
• directory

Share Improve this question edited Apr 16, 2018 at 9:58 Tobias Glaus asked Apr 16, 2018 at 9:52 Tobias GlausTobias Glaus 10355 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 5

Relative paths in css files are relative to the css file location, but in PHP they are relative to the website URL not to the php file location in the server.

So to make sure you get the right URL for any resource you want to load in PHP files you can use the function get_template_directory_uri() like this:

"<?php echo get_template_directory_uri(); ?>":

For example in img the attribute src would be:

<img src="<?php echo get_template_directory_uri(); ?>/media/img/contact-1.jpg" />

And so on for js files and css files.

Notice: In the case of using a Child theme, use this function instead get_stylesheet_directory_uri() the same way:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img.jpg" />

Otherwise the get_template_directory_uri() function in this case will only return the current parent theme URL and not the URL of the child theme which you are using in this case.

If you are using tag in any php file, just use get_template_directory_uri()

<img src="<?php echo get_template_directory_uri(); ?>/img/contact-1.jpg">