CSS: background-image does not work

Printable View

Dec 20, 2012, 22:15
successfulfail

CSS: background-image does not work

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
Dec 20, 2012, 22:17
ralph.m

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?
Dec 20, 2012, 22:19
successfulfail

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?
Dec 20, 2012, 23:33
ronpat

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 */
Dec 21, 2012, 00:53
successfulfail

"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...
Dec 21, 2012, 01:08
successfulfail

I changed the CSS code to:

Code:

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

And now the image is visible.
Dec 21, 2012, 02:47
ronpat

Good catch!
Dec 21, 2012, 02:51
ralph.m

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. :)
Dec 21, 2012, 03:10
ronpat

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
Dec 21, 2012, 04:59
ralph.m

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.
Dec 21, 2012, 10:34
polyhedra

2 Attachment(s)

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
Attachment 61249
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
Attachment 61250

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