CSS: background-image does not work

**successfulfail** · Dec 20, 2012 22:15

When I upload this CSS code, HTML code to the hosting server, the slogan.png image does not show up...

CSS code:

Code:

body
{
	margin: 0;
	height: 100%;
}


.main
{
	width: 950px;
	margin: 40px auto 0;
	/* padding: 0 0 50px; */
	background-color: #DDD;
}

.logo
{
	width: 800px;
	margin: 40px auto 0;
	position: relative;
}

.pages
{
	width: 510px;
	padding: 0 0 0 100px;
	background-color: #BBB;
	background-image: url(img/slogan.png) no-repeat 75px 50%;
}

HTML code:

Code:

<body>

  <div class="main">
    <p>Class=Main</p>
  
    <div class="logo">
      <img src="img/logo.png"/>
    </div>
  

  </div>


</body>

Slogan.png
500X427px

logo.png
800X110px

**ralph.m** · Dec 20, 2012 22:17

Code:

background-image: url(img/slogan.png) no-repeat 75px 50%;

That path assumes that the image folder is in the same folder as your CSS file. Is it?

**successfulfail** · Dec 20, 2012 22:19

No slogan.png image file is at "img" folder.

Currently I have two folders in use: img folder, css folder.
Do I have to move the image location to make it work?

**ronpat** · Dec 20, 2012 23:33

The question asked is: Where is the "img" folder???

Currently, your css file is looking for the "img" folder in its css directory like this:

yourfile.html
css/cssfile.css /* path to image: img/slogan.png */
css/img/slogan.png

Absolute vs Relative paths:

/img/slogan.png is an absolute path to the image.
img/slogan.png is a relative path to the image.

yourfile.html
/img/slogan.png /* these folders are in the root directory */
/css/cssfile.css /* path to image: /img/slogan.png , or ../img/slogan.png */

yourfile.html
img/slogan.png /* these folders are in the same directory as the html file, which may not be the root directory. */
css/cssfile.css /* within this css file, the path to the image may be different than in the above css file *//* path to image: ../img/slogan */

**successfulfail** · Dec 21, 2012 00:53

"img" folder is located where index.html file is (So in the root directory)

I have fixed my CSS code to: /img/slogan.png (So I fixed it to the absolute path)
However the image (slogan.png) is no where to be seen...

**successfulfail** · Dec 21, 2012 01:08

I changed the CSS code to:

Code:

background: url(/img/slogan.png) no-repeat 75px 50%;

And now the image is visible.

**ronpat** · Dec 21, 2012 02:47

Good catch!

**ralph.m** · Dec 21, 2012 02:51

Off Topic:

Over time, around here, there have been arguments over whether something like

/img/slogan.png

is actually "absolute" or not. I used to call it that, but the panditas have now convinced me to call it a "root relative" path, and to reserve "abolute" for paths of this ilk:

http://myslite.com/img/slogan.png

It's "absolute" because it works from anywhere—on any site. Seems fair enough to me. The other paths are relative to the site itself, but not universal, as it were.

**ronpat** · Dec 21, 2012 03:10

When I wrote the post I had put (root relative) in parens, but deleted it to avoid mixing "relative" terms. While "root relative" is certainly a reasonable term, I would argue that including the URI in a path makes it a network path rather than an absolute path. The internet is fundamentally a massive network. Taking a very-well-established computer design/engineering term and deciding that it is now the domain of the internetters to redefine as they please seems a bit weird. Network path is far more correct than absolute path. Oh, well.

Edit:
A network path can be directed anywhere. http://sitename can be routed anywhere. There is nothing "absolute" about it. It's ethereal at best. An absolute path is a hardware path that is indeed root relative and cannot be changed. Adopting the term absolute path for one that begins with http:// does not seem very smart.

recalcitrant ron

**ralph.m** · Dec 21, 2012 04:59

Yes, you have a larger view of it than I do, but meh, I claim to be only the messenger here.

I guess I think in terms of a URI being a uniform locator that is unique to that resource, so I think of it as absolute in that sense—that it points to one place/ one unique location from any point.

**polyhedra** · Dec 21, 2012 10:34

It is importent to write CSS corectly.
1) Write the CSS like this background: url(/img/slogan.png) 75px 50% no-repeat;
Here is how to use the background propertie
css-background-5.jpg
2) Use paths either from root or starting from your CSS file. Understand how your server handles paths!
Here is a fun picture on folder paths
directories.jpg

Notice my server is lighttpd and it handles both paths from root "/", and also path from the css "../media/"
Take a look

User Tag List

Thread: CSS: background-image does not work

Thread Tools

Display

CSS: background-image does not work

Bookmarks

Bookmarks

Posting Permissions