background image not showing but other styles are showing for the same class or element

Question

Why is the background image not showing, but if I change other properties like color or even background color it works? The image path is correct. It is like this

.container {
            background-image: url('/myapp/peter-broomfield-m3m-lnR90uM-unsplash.jpg');
            z-index: -1;
            opacity: 1;
            background-size: cover;
            background-position: center center;
            height: 900px;
            width: 900px;}

try it `background-image: url(myapp/peter-broomfield-m3m-lnR90uM-unsplash.jpg);` — s.kuznetsov, Feb 18 '21 at 17:38
Welcome to StackOverflow! I'm guessing something is probably wrong with your relative image path. Double check your directory structure and test the absolute path by entering it in a new browser window to make sure the image is loading. You can look for a 404 error in the browser console. Here is a [JSFiddle](https://jsfiddle.net/ovy0264c/) that works fine with your CSS and a placeholder image. — trevorp, Feb 18 '21 at 17:44

score 0 · Answer 1 · answered Feb 18 '21 at 17:50

0

There must to be some problem with the relative path of image you have used.

answered Feb 18 '21 at 17:50

Ankur29

16
3

bro, I checked the path a lot of times. It is perfect. Also, I used the image without ' ' and again no result. – The Khabalu Feb 18 '21 at 17:58
Did you try with the absolute path ? just to be sure that there is no issue accessing that image location from the code. – Ankur29 Feb 18 '21 at 18:05

score 0 · Answer 2 · answered Feb 18 '21 at 17:59

The CSS syntax is correct. However, the leading forward slash of your relative path plays an important role.

/myapp/peter-broomfield-m3m-lnR90uM-unsplash.jpg This relative path says "go to the root of your website and find the 'myapp' folder from there.

myapp/peter-broomfield-m3m-lnR90uM-unsplash.jpg This one says "look for the 'myapp' folder from where the css file is located.

.container {
            background-image: url('https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg');
            z-index: -1;
            background-color: red;
            opacity: 1;
            background-size: cover;
            background-position: center center;
            height: 900px;
            width: 900px;}

<div class="container"></div>

I got the solution. It was because the image only appears when I used the direct source address of it. My problem was that I downloaded it and kept it in the file of my visual studio code and used the image from there. But I don't know why sometimes the downloaded link works and sometimes it do not. — The Khabalu, Feb 18 '21 at 18:19

background image not showing but other styles are showing for the same class or element

2 Answers2