CSS: background-image does not work

HTML & CSS
1

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

CSS 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:

<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

2 
background-image: url([COLOR="#FF0000"]img/slogan.png[/COLOR]) no-repeat 75px 50%;

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

3

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?

4

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 */

5

“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…

6

I changed the CSS code to:

[COLOR="#FF0000"]background[/COLOR]: url(/img/slogan.png) no-repeat 75px 50%;

And now the image is visible.

7

Good catch!

8

[ot]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:

[noparse]http://myslite.com/img/slogan.png[/noparse]

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. :)[/ot]

9

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

10

Yes, you have a larger view of it than I do, but meh, I claim to be only the messenger here. :lol: 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.

11

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

  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

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