Jump to content


css: images not showing

Started by derek.sullivan, Sep 05 2009 02:57 PM

4 replies to this topic

#1 derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 341 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 05 September 2009 - 02:57 PM

for some reason, my menu bg, content bg, and footer bg aren't showing. And I'm not sure why. Attached are my css coding, and my html tell me if you can find out why. http://dsullweb.com to see what im talking about

stylesheet.css
body {
 background: #666666;
 margin: 0;
 padding: 0;
}
#menu {
 background-image: url('images/menubg.gif') no repeat;
 width: 775px;
 height: 35px;
 margin: auto;
}
#border {
 background-image: url('images/cntbg.gif') repeat y;
 width: 775px;
 height: 200px;
 margin: auto;
}
#footer {
 background-image: url('images/btm.gif') no repeat;
 width: 775px;
 height: 35px;
 margin: auto;
}

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DSULLWEB</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="menu">&nbsp;</div>
<div id="border"><?php
$i = 0;
while ($i < 200) {
echo $i++."<br />";
}
?></div>
<div id="footer">&nbsp;</div>
</body>
</html>

#2 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 05 September 2009 - 03:55 PM

You can't add a position to the background-image property, only the background and background-position properties accept them. So either use 'background' and keep the shorthand, or break the line up into two properties.

#3 derek.sullivan

    Jedi In Training

  • Members
  • PipPip
  • 341 posts
  • Gender:Male
  • Location:Georgia
  • Interests:preaching, programming, music, friends, outdoors, moves, books

Posted 05 September 2009 - 04:27 PM

I thought I tried the short hand, but let me try to break it up into seperate properties.

Now, I used the shorthand again, and I got rid of the repeat y and no repeats. and it works! Isn't that weird?

#4 rc69

    PHP Master PD

  • P2L Staff
  • PipPipPipPip
  • 3,827 posts
  • Gender:Male
  • Location:Here
  • Interests:Web Development

Posted 05 September 2009 - 10:19 PM

Nope, shorthand only applies to background; background-image != background. Generally speaking (and i mean generally, i'm not 100% on this), any CSS property with a '-' in it will not work correctly using "shorthand notation."

As i write this, i remember background-position being about the only exception to that rule.

Edited by rc69, 05 September 2009 - 10:21 PM.

#5 Marc

    Young Padawan

  • Members
  • Pip
  • 51 posts

Posted 11 December 2009 - 03:59 PM

When doing shorthand, you can only do it on the "background" property, meaning you can't add other shorthand code on things like "background-image" or "background-color", etc.

I find myself always using the shorthand for background these days as it cuts down on a lot of declarations. It's a good practice to get into, but always remember the order of your styles should be this when using the "background" shorthand:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Here's an example:

body {background:#FFFFFF url(images/bg.jpg) repeat-y top left;}

It doesn't matter if you leave some of the styles off, just as long as they stay in the same order. So, using the example above as a starting point, say you don't need to specify a background color or position, you would do it like this:

body {background:url(images/bg.jpg) repeat-y;}

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design