...

View Full Version : Background image not working Css



Yaz1994
11-09-2012, 02:45 AM
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
11-09-2012, 07:39 AM
try

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

VIPStephan
11-09-2012, 11:47 AM
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
11-09-2012, 01:45 PM
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
11-09-2012, 02:09 PM
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
11-09-2012, 03:23 PM
Or install xampp (http://www.apachefriends.org/en/xampp.html) on your PC.

vjm
11-09-2012, 06:15 PM
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
11-10-2012, 12:25 AM
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
11-10-2012, 02:23 AM
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
11-10-2012, 04:17 AM
You're welcome Yaz1994! I'm happy that I helped you with your problem. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum