how to link background image in stylesheet Wordpress?

Question

.jumbotron {
    margin-bottom: 0px;
    background-image: url(../img/desktop-urania.jpg);
    min-height: 600px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

This is the working CSS in HTML, but i am trying to convert HTML to WordPress, while converting I link my stylesheet in function.php (function urania_script_enqueue() { wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/urania.css', array( '$handle', '$src', '$deps', '$ver', '$media'), '1.0.0', 'all');)

but image is not loading ...

Theme Name URANIA:: -> Css-> urania.css (Stylesheet) Theme Name URANIA:: -> img -> desktop-urania.jpg (image)

Please Help

.jumbotron { margin-bottom: 0px; background-image: url(../img/desktop-urania.jpg); } i tried with this also but still imageis not printing.. — Ashish Lala, Sep 12 '16 at 11:47
There's not much to go off of, any way you can provide a link? Have you tried checking the console for errors? — Turi S., Sep 12 '16 at 11:52
.jumbotron{ background-image: url( "/images/desktop-urania.jpg"); width: auto; height: auto; } tried with this but still now printing image — Ashish Lala, Sep 12 '16 at 11:56
That definitely won't work, since PHP cannot be executed inside the CSS file. I noticed in that example you used 'images' for the directory name instead of 'img' from before. Could that be the issue? — Turi S., Sep 12 '16 at 12:01

score 0 · Answer 1 · answered Sep 12 '16 at 12:27

Please check your image color mode if your image color mode is CMYK then it will not display on IE-8 you need to change the color mode to RGB.

If your image color mode is correct then It would be better if you can share the actual site URL so that we can see the structure of site properly.

Kip Deeds · Answer 2 · 2017-08-31T17:06:08.407

PHP will not work in a css file, but you could use a wordpress function inline. You can use just css. Since my css (after sass processing) ended up in one file in the theme root, I had to alter my file path.

The following stackoverflow answer solved my problem. CSS background images in WordPress

Try double checking your file path or follow wp convention and put the css in styles.css in the root. See get_template_directory_uri(). Also perhaps wordpress likes the path in quoatation marks?

.jumbotron {background-image: url("images/desktop-urania.jpg")}

how to link background image in stylesheet Wordpress?

2 Answers2