background-image not showing in css

Question

ok, so i've been following this tutorial on how to add a simple web-responsive background image to a site. now, whatever I try to do, the background image won't show in the browser. This has happened to me before on a simmilar project, the background image wouldn't show, but i fixed that problem by using in line css. This time it didn't work. Strange thing is, I tried to copy-paste the code provided at the end of the tutorial, I copy-pasted the whole thing in separate HTML and CSS files and the funny thing is that the final web page result is showing but the image is not. Please help...

edit1:The project structure is failry simple, the HTML, CSS and .jpeg files are all in one folder.

edit2: SOLVED! Missing quotes in the background-image:url("poza.jpg")

the HTML is:

...
  <body>
    <h1>The biggest startup event of the year!</h1>
    <button>find out more!</button>
  </body> 

and the CSS for that is:

body,
html {
  background-image: url(poza.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
 }```

it is a simple project structure of one folder with the HTML, CSS and jpeg file. — mo_tan, Oct 18 '20 at 18:13
Your `poza.jpg` file needs to be available at the same endpoint, as the site using this code. For example, if you're accessing your site with `/index.html`, then this file needs to be at `/poza.jpg`. — Maks Babarowski, Oct 18 '20 at 18:17
Hi mo_tan. open the inspector and see is the image is getting loaded so you can know the source of the problem — Moaz Mabrok, Oct 18 '20 at 18:31

score 1 · Answer 1 · answered Oct 18 '20 at 18:19

1

Solution 1:You could try hard refreshing your browser using ctrl + f5 or try renaming image and try using another one Solution 2: Try to add slash and quotes before image like this url("/poza.jpg")

answered Oct 18 '20 at 18:19

Bruno Miljan

11
1

turns out, the quotes were the big problem! – mo_tan Oct 18 '20 at 18:27

score 0 · Answer 2 · answered Oct 18 '20 at 18:18

0

You should have quotes around poza.jpg

background-image: url(“poza.jpg”) no-repeat

And use the web browsers console to check if there is an error loading the poza.jpg file

answered Oct 18 '20 at 18:18

Tom Harvey

3,681
3
19
28

1

that was it, it worked! the quotes helped! thanks a bunch! – mo_tan Oct 18 '20 at 18:26
According to https://stackoverflow.com/a/851753/6158307 usually you don't need to put quotes around the path. Perhaps dot character is troublesome for some browsers too. – Maks Babarowski Oct 18 '20 at 18:29
Good to hear it worked. Can you accept my answer as the correct one? – Tom Harvey Oct 18 '20 at 19:12

score 0 · Answer 3 · answered Jun 04 '21 at 10:55

use this ,

body {
  background-image: url(poza.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
}

This should work.

background-image not showing in css

3 Answers3