Background image not working Css

[Yaz1994]

Hi, This is my first post here! I am stuck with some CSS, I am trying to link an image to my stylesheet but it does not work unless it is in the style sheet folder bearing in mind that the image is in a diffrent folder. My folder structure is:
- As > Css > style.css
- As > images > banner.jpg

when I do <img src="..\images\banner.jpg"> the image works perfectly fine, when I put that into my css nothing comes up:
background-image:url('..\images\banner.jpg');

tried a lot of diffrent things such as:
background-image:url('\images\banner.jpg');
background-image:url('..\images\banner.jpg');
background-image:url('..\..\images\banner.jpg');

I'd be very grateful if someone is willing to help me fix my issue!
Thanks!!!

[JT Web Design]

try

background-image:url('images/banner.jpg');

[VIPStephan]

If your directory structure looks like this:

/css
  style.css
/images
  banner.jpg
page.html

… i. e. the HTML file is at the same level as the directories, your relative file paths must look like this:

<img src="images/banner.png" …>

or

background-image: url(../images/banner.jpg);

Note the forward slashes.

[Yaz1994]

Hmm, the folder structure is
As> css > style.css
As> images> banner.jpg
As > html > index.htm

+ this is not on a server this is on my computer but none of them work :/ anything else?

[DanInMa]

the urls you are using are nto working becuase you are jsut viewing the page from your web broswer without a server, so you will have to use local file links instead Im nto even sure if this will work in css but you can try :



background-image: url('file://c:/localfoldertofiles/images/banner.jpg');

( honestly you should get a test server or a temporary site to post your code on because its not going to look and react how it should without the support of a web server and when you finally have to upload your work to a server, none of the links will work)

[SB65]

Or install xampp on your PC.

[vjm]

Originally Posted by Yaz1994

Hmm, the folder structure is
As> css > style.css
As> images> banner.jpg
As > html > index.htm

+ this is not on a server this is on my computer but none of them work :/ anything else?

I see that all your files are in the folder named "As" and inside it are the folders named css, images & html. The file "style.css" is inside the css folder, then the "banner.jpg" file is inside the images folder and lastly the "index.htm" file is inside the html folder. If this is correct, I suggest this:

*In the HTML file, use this href where you link your css file:
href="../css/style.css"

*In the CSS file, use this in your background-image tag (always use forward slashes):
url(../images/banner.jpg)

Note: You don't need to install xampp. As long as you're not using server-side language for your web pages.

[Yaz1994]

Thanks everyone for having a go at helping me! VJM, I am very grateful for you solving my problem! Thank you and thank everyone that contributed! Really appreciate it!

[waxdoc]

What am I missing?

Why are your slashes \ slanting backward,

<img src="..\images\banner.jpg">

instead of forward / ?

<img src="jmWEB/floral/57PurinaPoster.jpg"  />

Basically, in HTML, you use ../folder to "dig out of a nested folder" so, if its nested two folders down, you use two ../../folder.

[vjm]

You're welcome Yaz1994! I'm happy that I helped you with your problem.