Title: CSS: background-image not working
Last modified: February 7, 2023
---
# CSS: background-image not working
* Resolved [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/)
* I am working at a wordpress theme. In the index.php in the theme map there is
a style element with “background-image” which is not working !! but “background-
color” works ! Outside wordpress in a classic html page, “background-image” works
also …
* what could be the reason ?
Viewing 13 replies - 1 through 13 (of 13 total)
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16449607)
* CSS is CSS is CSS. WordPress doesn’t “process” CSS in any way. The browser does.
* Chances are some other selector on the WordPress page with a higher [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
is overriding the `background-image` style you specified.
* If this was online and you could share the link, I could take a look and let
you know why your background image is not working. Other than that, your browser’s
developer console should be your best friend.
* Good luck!
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16451821)
* Thanks, a simple example : [http://schaakmatinzuidoost.nl](http://schaakmatinzuidoost.nl)
keeps bothering me ….
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456438)
* The wordpress site : [http://schaakmatinzuidoost.nl](http://schaakmatinzuidoost.nl/)
is an (old) copy of classic html site [http://weesperschaakclub.nl](http://weesperschaakclub.nl ),
with the same design ……
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456540)
* Both your stylesheet and image are returning **404 (not found)** errors.
* The problem is occurring because the relative URLs you’ve given are incorrect.
* Below is the relevant portion of your code from your homepage:
* ```
```
* This code presupposes that both the `style.css` and `bg_grad.jpg` files are at
the same location as the HTML document (the root level, in this case). That is,
the relative URLs you specified for the stylesheet and background image resolve
to:
* [http://schaakmatinzuidoost.nl/style.css](http://schaakmatinzuidoost.nl/style.css)
and [http://schaakmatinzuidoost.nl/bg_grad.jpg](http://schaakmatinzuidoost.nl/bg_grad.jpg)
* But it seems you don’t have these files in the domain’s root directory as expected
by the specified URLs, hence the 404 (not found) errors… and why neither your
CSS nor background image work.
* **So where exactly are these assets located? Are they in a theme folder? Or somewhere
else?**
* You mentioned earlier you’re building a theme. Say your theme’s folder is `mytheme`
and these two assets are in your theme folder, then the correct relative URLs
will be
* `/wp-content/themes/mytheme/style.css`
* `/wp-content/themes/mytheme/bg_grad.jpg`
* Using the above URLs will work, and you may want to try this as a quick check.
* But WordPress provides PHP functions like [get_template_directory_uri()](https://developer.wordpress.org/reference/functions/get_template_directory_uri/)
that you can use in your PHP template files to make your theme URLs more portable
to different WordPress setups.
* **Example:** the following code will always get the correct image URL irrespective
of what the theme name is, or even if the entire theme folder has been moved
from the default **/wp-content/themes/** to a custom location.
* ``
* And here’s a handy guide from the official WordPress theme developer documentation
you can follow to load your theme’s CSS and JS assets efficiently: [https://developer.wordpress.org/themes/basics/including-css-javascript/](https://developer.wordpress.org/themes/basics/including-css-javascript/)
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456706)
* I experimented with both locations, there are als two copy’s of **bg_grad.jpg**
but no solution. Also problems with style.css. folder name: /www/wp-content/themes/
weesper-schaakclub
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456788)
* Thanks, it seems to be the right solution, to change the url ….
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456818)
* I’m going to hang in here until you get to the bottom of this, provided you have
the patience to work along with me.
* > folder name: /www/wp-content/themes/weesper-schaakclub
* You are using the Apache web server, and it seems your vhost’s document root
is `/www`.
* So if your theme’s folder is `weesper-schaakclub`, then the correct relative
URL to your theme folder should be:
* `/wp-content/themes/weesper-schaakclub/`
* And the absolute URL should be:
* [http://schaakmatinzuidoost.nl/wp-content/themes/weesper-schaakclub/](http://schaakmatinzuidoost.nl/wp-content/themes/weesper-schaakclub/)
* But the above URL does not work. And if the path to the directory doesn’t work,
then, of course, the paths to individual files in the directory will not work
either.
* We’ll revisit this soon.
* But let’s first test to confirm that the above URL **_should_** work (if everything
else is OK).
* A fresh WordPress installation like yours comes with a number of default themes,
the latest of which is **Twenty Twenty-There**. This theme’s folder is `twentytwentythree`.
* Using the same URL pattern mentioned above, the relative URL to this theme’s
folder is:
* `/wp-content/themes/twentytwentythree/`
* And the absolute URL should be:
* **[http://schaakmatinzuidoost.nl/wp-content/themes/twentytwentythree/](http://schaakmatinzuidoost.nl/wp-content/themes/twentytwentythree/)**
* Indeed, when you click on the above link, you’ll see an index page displaying
all the files and folders in this folder.
* 
* The question, then, is…
* Why does the link to the default Twenty Twenty-Three theme’s folder work… but
yours doesn’t work?
* I can only speculate a couple of possibilities:
* 1) The folder name may be different than what you provided. Note that file/folder
names are CaSe-sensitive on Linux systems!
* 2) The document root for this particular virtual host may be different than what
you provided
* 3) There may be directory ownership/permission problems
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16460014)
* The image is sometimes visible, needs further research …
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16460096)
* It seems you’re still using the wrong URLs 😀
* This is wrong: `Images/logo.jpg`
* Should be: `/wp-content/themes/weesperschaakclub/Images/logo.jpg`
* Note the `/` in front. You left that out in your stylesheet’s URL, so the stylesheet
doesn’t work on some pages.
* Consider using absolute URLs to avoid these issues. The above image’s full URL
will be:
* `https://schaakmatinzuidoost.nl/wp-content/themes/weesperschaakclub/Images/logo.
jpg`
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16461496)
* Thanks !! Now make a wordpress menu …..
* [juutmuijs](https://wordpress.org/support/users/juutmuijs/)
* (@juutmuijs)
* [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16844982)
* [@gappiah](https://wordpress.org/support/users/gappiah/) I have tried to change
the absolute URL, and the color, in 2 different css files, and I can’t get it
to work. Any idea what I am doing wrong? I am trying to add a background image
to the navigation bar in the header. I’m a total nitwit…
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16844997)
* [@juutmuijs](https://wordpress.org/support/users/juutmuijs/): I’ve no idea because
I have no clue what your question is.
* If you have a problem, as per the forum guidelines, please start your own topic
and thoroughly describe your issue. Provide the relevant URL as well, so I (or
other WordPress support volunteers here) can take a look and help you.
* Good luck!
* [juutmuijs](https://wordpress.org/support/users/juutmuijs/)
* (@juutmuijs)
* [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16845004)
* [@gappiah](https://wordpress.org/support/users/gappiah/) Oke, thank you
Viewing 13 replies - 1 through 13 (of 13 total)
The topic ‘CSS: background-image not working’ is closed to new replies.
* In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/)
* 13 replies
* 3 participants
* Last reply from: [juutmuijs](https://wordpress.org/support/users/juutmuijs/)
* Last activity: [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16845004)
* Status: resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics
; ?>/logo.png){kind=logo}
`
* And here’s a handy guide from the official WordPress theme developer documentation
you can follow to load your theme’s CSS and JS assets efficiently: [https://developer.wordpress.org/themes/basics/including-css-javascript/](https://developer.wordpress.org/themes/basics/including-css-javascript/)
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456706)
* I experimented with both locations, there are als two copy’s of **bg_grad.jpg**
but no solution. Also problems with style.css. folder name: /www/wp-content/themes/
weesper-schaakclub
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456788)
* Thanks, it seems to be the right solution, to change the url ….
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16456818)
* I’m going to hang in here until you get to the bottom of this, provided you have
the patience to work along with me.
* > folder name: /www/wp-content/themes/weesper-schaakclub
* You are using the Apache web server, and it seems your vhost’s document root
is `/www`.
* So if your theme’s folder is `weesper-schaakclub`, then the correct relative
URL to your theme folder should be:
* `/wp-content/themes/weesper-schaakclub/`
* And the absolute URL should be:
* [http://schaakmatinzuidoost.nl/wp-content/themes/weesper-schaakclub/](http://schaakmatinzuidoost.nl/wp-content/themes/weesper-schaakclub/)
* But the above URL does not work. And if the path to the directory doesn’t work,
then, of course, the paths to individual files in the directory will not work
either.
* We’ll revisit this soon.
* But let’s first test to confirm that the above URL **_should_** work (if everything
else is OK).
* A fresh WordPress installation like yours comes with a number of default themes,
the latest of which is **Twenty Twenty-There**. This theme’s folder is `twentytwentythree`.
* Using the same URL pattern mentioned above, the relative URL to this theme’s
folder is:
* `/wp-content/themes/twentytwentythree/`
* And the absolute URL should be:
* **[http://schaakmatinzuidoost.nl/wp-content/themes/twentytwentythree/](http://schaakmatinzuidoost.nl/wp-content/themes/twentytwentythree/)**
* Indeed, when you click on the above link, you’ll see an index page displaying
all the files and folders in this folder.
* 
* The question, then, is…
* Why does the link to the default Twenty Twenty-Three theme’s folder work… but
yours doesn’t work?
* I can only speculate a couple of possibilities:
* 1) The folder name may be different than what you provided. Note that file/folder
names are CaSe-sensitive on Linux systems!
* 2) The document root for this particular virtual host may be different than what
you provided
* 3) There may be directory ownership/permission problems
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16460014)
* The image is sometimes visible, needs further research …
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16460096)
* It seems you’re still using the wrong URLs 😀
* This is wrong: `Images/logo.jpg`
* Should be: `/wp-content/themes/weesperschaakclub/Images/logo.jpg`
* Note the `/` in front. You left that out in your stylesheet’s URL, so the stylesheet
doesn’t work on some pages.
* Consider using absolute URLs to avoid these issues. The above image’s full URL
will be:
* `https://schaakmatinzuidoost.nl/wp-content/themes/weesperschaakclub/Images/logo.
jpg`
* Thread Starter [eggbird](https://wordpress.org/support/users/eggbird/)
* (@eggbird)
* [3 years, 4 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16461496)
* Thanks !! Now make a wordpress menu …..
* [juutmuijs](https://wordpress.org/support/users/juutmuijs/)
* (@juutmuijs)
* [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16844982)
* [@gappiah](https://wordpress.org/support/users/gappiah/) I have tried to change
the absolute URL, and the color, in 2 different css files, and I can’t get it
to work. Any idea what I am doing wrong? I am trying to add a background image
to the navigation bar in the header. I’m a total nitwit…
* [George Appiah](https://wordpress.org/support/users/gappiah/)
* (@gappiah)
* [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16844997)
* [@juutmuijs](https://wordpress.org/support/users/juutmuijs/): I’ve no idea because
I have no clue what your question is.
* If you have a problem, as per the forum guidelines, please start your own topic
and thoroughly describe your issue. Provide the relevant URL as well, so I (or
other WordPress support volunteers here) can take a look and help you.
* Good luck!
* [juutmuijs](https://wordpress.org/support/users/juutmuijs/)
* (@juutmuijs)
* [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16845004)
* [@gappiah](https://wordpress.org/support/users/gappiah/) Oke, thank you
Viewing 13 replies - 1 through 13 (of 13 total)
The topic ‘CSS: background-image not working’ is closed to new replies.
* In: [Everything else WordPress](https://wordpress.org/support/forum/miscellaneous/)
* 13 replies
* 3 participants
* Last reply from: [juutmuijs](https://wordpress.org/support/users/juutmuijs/)
* Last activity: [2 years, 11 months ago](https://wordpress.org/support/topic/css-background-image-not-working/#post-16845004)
* Status: resolved
## Topics
### Topics with no replies
### Non-support topics
### Resolved topics
### Unresolved topics
### All topics