Having some trouble figuring out the background-image in css

Question

we are about 10 danish people from an IT class in Denmark, and we have discovered that the background-image thing in css isnt really working like we want it to.. Maybe anyone out there can help us?

I personally havent worked much with the problem, but my friend Jacob (Who is busy atm so he cant write this for himself) has used like the past hour on figuring out how it works. What he has found is, that it works when you give it a URL like:

background-image: url("i.imgur.com/AO4oM9a.jpg");

It will work just fine, but if you try with a local file:

background-image: url("images\background.jpg");

It wont work, we have tried some different stuff, like putting in the full destination of the file, like "c:/desktop/website/images/background.jpg" you know, (Probably not valid, i just typed something so you would understand what i meant by full destination).

Anyone know how or why this wont work?

BTW we are doing it in the HTML tag in a .css file, like:

html { background-image: url("images\background.jpg"); }

Answer 1

You are using back slash (\\) instead of forward slash (/). And other thing to remember is you should give correct path of image. if your css file and image is in same folder than you can do like this

html { 
   background-image: url("background.jpg"); 
}

if your css is inside css folder and in same directory you have your image inside images folder then you can do like this

html { 
   background-image: url("../images/background.jpg"); 
}

Answer 2

Try to use like this:

html { background-image: url("/images/background.jpg"); }

Or

html { background-image: url("images/background.jpg"); }

Answer 3

试试这个：

html { background-image: url("../images/background.jpg"); }

Answer 4

Just write:

background:url('../images/background.jpg');

Add more css as:

background-size:cover; min-height:400px; width:100%; background-position:center center;

See below working example:

 /*--CSS--*/ .image-box{background:url("https://cdn.pixabay.com/photo/2014/03/22/22/05/sunbeam-292987_960_720.jpg"); background-size:cover; min-height:300px; background-repeat:no-repeat; background-position:center center; } 

 <!--HTML--> <div class="image-box"> <h1>This example</h1> </div> 

Answer 5

This may help:

always remember to give background image in style.css(css file) and if you have no choice left then define it in HTML and always keep images and css files in a folder names assets and then you can call them out easily.

background-image: url('assets/TYdollarsign.jpg');