Problem with CSS background

  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

does anyone see something wrong with this part of my CSS:

Code: [ Select ]
{
background-image:
url("/img/bg.gif");
background-repeat: repeat-x
}
  1. {
  2. background-image:
  3. url("/img/bg.gif");
  4. background-repeat: repeat-x
  5. }


The img doesn't display--If you can tell me how to do this with out an image it would be even better though. It should be a blue bar across the top of my page (check my current to see what it should look like). If anyone could point me in the direction of a good CSS tutorial I would really appreciatae it. Thx.
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

I usually do it like this:
Code: [ Select ]
{
background:
url('/img/bg.gif');
background-repeat: repeat-x
}
  1. {
  2. background:
  3. url('/img/bg.gif');
  4. background-repeat: repeat-x
  5. }


Notice I dont have the "-image" and replaced the "img/bg.gif" with 'img/bg.gif'
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Hmmm, I tried that also but it didn't work. I know that the img is in the folder so is there something else that I could be doing wrong?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

you can use the shorthand...

Code: [ Select ]
background:url(images/myimage) repeat-x;


Now, if the HTML page is in the root, and the CSS is in a sub folder you'll want fix your relative path to the image like so...

Code: [ Select ]
background:url(../images/myimage) repeat-x;



jlknauff: Please use the CODE tags when inserting code of any flavor. Thanks.
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

EDIT: try what he suggested first, he knows more than I do on this subject ;)

try this:
Code: [ Select ]
{
background:
url('/img/bg.gif');
background-repeat: repeat-x;
}
  1. {
  2. background:
  3. url('/img/bg.gif');
  4. background-repeat: repeat-x;
  5. }

??? Im not too sure. maybe adding the ";" at the end would help. If not, try taking out the "background-repeat: repeat-x;" and see if the image takes up the whole page, if the imahes still doesnt show, then you know its probly somthing wrong with image, if the image does show there is probly a problem with the "background-repeat: repeat-x;". Also, im not sure if this make a diffrence, but on the "url('/img/bg.gif');" try making it "url('img/bg.gif'); " with out the "/" forward slash. ;)

-trying to help hacker007
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Ooops.

Ok, well I have tried that as well. I'll put my whole CSS so far up here.

Code: [ Select ]

/* CSS Document */

h1 {
    font: bold 12pt arial;
    letter-spacing: 1px;
    margin-top: 25px;
    margin-left: 15px;
    margin-bottom: 0px;
    color: #003366;
    }
p {
    font: 10pt arial;
    margin-top: 0px;
    margin-left: 25px;
    text-align: left;
    }
a:link {
    font-weight: normal;
    text-decoration: none;
    color: #003366;
    }
a:visited {
    font-weight: normal;
    text-decoration: none;
    color: #003366;
    }
a:hover, a:active {
    text-decoration: underline;
    color: #003366;
    }

{
background:url(img/bg.gif) repeat-x;
}

  1. /* CSS Document */
  2. h1 {
  3.     font: bold 12pt arial;
  4.     letter-spacing: 1px;
  5.     margin-top: 25px;
  6.     margin-left: 15px;
  7.     margin-bottom: 0px;
  8.     color: #003366;
  9.     }
  10. p {
  11.     font: 10pt arial;
  12.     margin-top: 0px;
  13.     margin-left: 25px;
  14.     text-align: left;
  15.     }
  16. a:link {
  17.     font-weight: normal;
  18.     text-decoration: none;
  19.     color: #003366;
  20.     }
  21. a:visited {
  22.     font-weight: normal;
  23.     text-decoration: none;
  24.     color: #003366;
  25.     }
  26. a:hover, a:active {
  27.     text-decoration: underline;
  28.     color: #003366;
  29.     }
  30. {
  31. background:url(img/bg.gif) repeat-x;
  32. }


My htm & CSS are in the root.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

the ";" is a divider between definition items. It doesn't have to be present on singular definitions, or the last definition in a chain.

this is fine...
Code: [ Select ]
body{background:#000}


so is this...
Code: [ Select ]
body{background:#000;color:#FFF}
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

ok, i think I got it:
Code: [ Select ]
Body {
background:url(img/bg.gif) repeat-x;
}
  1. Body {
  2. background:url(img/bg.gif) repeat-x;
  3. }


try that one ;)

EDIT: ok DM, i wasnt to sure if it made a diffrence or not. Thought it was worth a try :p
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

the problem is your not providing a selector for your definition.

should be...

Code: [ Select ]
body{background:url(img/bg.gif) repeat-x;}


not

Code: [ Select ]
{background:url(img/bg.gif) repeat-x;}
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Awsome! Thx for your help guys.
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

No problem Glad to help :D

-always trying to help hacker007
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Hacker007 wrote:
ok, i think I got it:
Code: [ Select ]
Body {
background:url(img/bg.gif) repeat-x;
}
  1. Body {
  2. background:url(img/bg.gif) repeat-x;
  3. }


try that one ;)

EDIT: ok DM, i wasnt to sure if it made a diffrence or not. Thought it was worth a try :p


I usually add the ";" to everything just out of habit. ;)

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 23 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.