CODEWITHSUNDEEP
htmlcssbackground
user3478086
user3478086

Reputation: 1

the background doesn't show up

When I am using 'no-repeat' the background is working, but as soon as I change to 'no-repeat' there is no background. I am trying to define the background in CSS.

body
{ font: normal 80% Arial, Helvetica, sans-serif;
  color: #000;
  background: #4E5869;
  background-image:  url(../images/bg_body.jpg) no-repeat;
 }

Would appreciate your help.

Cheers

Upvotes: 0

Views: 44

Answers (4)

Andrew Newby
Andrew Newby

Reputation: 5197

You can't use no-repeat as part of background-image (all that accepts, is the URL to the image)

You need to use background-repeat:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

Upvotes: 0

OmniPotens
OmniPotens

Reputation: 1125

Why not try this:

body
{ font: normal 80% Arial, Helvetica, sans-serif;
  color: #000;
  background-color: #4E5869;
  background-image:  url(../images/bg_body.jpg);
  background-repeat: no-repeat;
 }

Now the background-color and background-image are served separately.

When you call background inside of it, you can call first your color then your image-url image-position and background-repeat. But when you call say background-image then you call just the image-url

 body
    { font: normal 80% Arial, Helvetica, sans-serif;
      color: #000;
      background-color: #4E5869;
      background-image:  url(../images/bg_body.jpg);
      background-repeat: no-repeat;
     }

OR 

body
    { font: normal 80% Arial, Helvetica, sans-serif;
      color: #000;
      background: #4E5869 url(../images/bg_body.jpg) no-repeat;
     }

Upvotes: 0

Marcel
Marcel

Reputation: 1288

This will work:

body {
  font: normal 80% Arial, Helvetica, sans-serif;
  color: #000;
  background: #4E5869 url(../images/bg_body.jpg) no-repeat;
}

background-image is the image, not any rules you wish to give. You can go with your style like this:

body {
  font: normal 80% Arial, Helvetica, sans-serif;
  color: #000;
  background: #4E5869;
  background-image:  url(../images/bg_body.jpg);
  background-repeat: no-repeat;
}

Pretty much equal. Some stuff to read: http://www.w3schools.com/cssref/pr_background-repeat.asp

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

no-repeat is a background-repeat value, not a background-image value...

background-image: url(...);
background-repeat: no-repeat;

OR:

background: #4E5869 url(...) no-repeat;

Upvotes: 2

Related Questions