[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1946
  • Last Modified:

How do you specifiy the subfolder "background-image: url(" path if the CSS, HTML and images are in different folders?

Seems lke a doofus question but...
Assuming the folder structure:
HtmlRoot = HTML file location
HtmlRoot/Images = Image location
HtmlRoot/Styles = CSS file location

The HTML file finds and loads the CSS using the syntax:  link href="Styles/t1Body.css"
The HTML finds and loads images using the syntax src="images/SMLLOGO.jpg"

But I can not find the proper CSS syntax which instructs the HTML to look in the Images folder for a background image  -- UNLESS both CSS and image file are in HtmlRoot.
I've tried: background-image: url("/Images/back.gif")
background-image: url("~/Images/back.gif")
and I'm not sure what else.

Any thoughts?
Thank you.

1 Solution
have you tried

background-image: url(/Images/back.gif)


background-image: url(../Images/back.gif)

you don't need double or single quotes in the path for background in CSS.
RichardKlineAuthor Commented:
Both work when launching IE from inside the VS2008 IDE....  Only the ../images/back.gif works when FireFox/IE are independently launched.  

I would've throught  that /images/back.gif would've worked but...

Try giving full URL of the image file, like.....
background-image: url(http://www.domainname.com/Images/back.gif)

Good Luck

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now