背景没有显示出来

Question

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

Answer 1

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;

Answer 2

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;
     }

Answer 3

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

Answer 4

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