没有显示背景图片。 为什么？

Question

I'm really stuck. I'm a beginner in CSS and i try to work with a background image.

When i don't use the parameter no-repeat everything works well but with no-repeat the image don't show up. Is this a size problem?

I've tried to work with <style></style> but this also doesn't work.

Any help much appreciated!

  #bg--service { background-image: url('http://www.sternwarte-radebeul.de/Images_vstw/fotos/sterngucker.jpg') no-repeat; } 

 <div class="row articles" id="bg--service"> <div class="col-sm-6"> <div class="col-xs-12 article"> <h1>Treuhand und Finanzen</h1> <p>Sie wollen sich auf Ihren Fachbereich konzentrieren, brauchen Unterstützung in Ihren Finanzen, eine Fiskal- oder Steuervertretung oder wollen Ihre Freizeit nicht mit buchhalterischen Fragen belasten?<a href=“#”>Mehr>></a> </p> </div> 

Answer 1

You're using the background shorthand notation in the background-image property, which won't work.

Change

background-image: url(../img/sternengucker.jpg) no-repeat;

to

background: url(../img/sternengucker.jpg) no-repeat;

Or use two separate rules like:

background-image: url(../img/sternengucker.jpg);
background-repeat: no-repeat;

Answer 2

background-image only accept the image property.

If you use the following it will work:

background-image: url('../img/sternengucker.jpg');
background-repeat: no-repeat;

You can read more about the background image property here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

You can also use the background shorthand:

background: url('../img/sternengucker.jpg') no-repeat top left;

This link shows more information about the background shorthand:

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

Answer 3

Use:

#bg--service {
    background: url(../img/sternengucker.jpg) no-repeat;
}

If you want to use background-image , then use this:

#bg--service {
    background-image: url(../img/sternengucker.jpg);
    background-repeat: no-repeat;
}

And then read this:

documentation background-image

documentation background-repeat

Or whole documentation about background and its properties here .

Answer 4

The background image and background-repeat are sub-properties of the background property so to fix it the background-image should be replaced with background .

  #bg--service { background: url('http://www.sternwarte-radebeul.de/Images_vstw/fotos/sterngucker.jpg') no-repeat; } 

 <div class="row articles" id="bg--service"> <div class="col-sm-6"> <div class="col-xs-12 article"> <h1>Treuhand und Finanzen</h1> <p>Sie wollen sich auf Ihren Fachbereich konzentrieren, brauchen Unterstützung in Ihren Finanzen, eine Fiskal- oder Steuervertretung oder wollen Ihre Freizeit nicht mit buchhalterischen Fragen belasten?<a href=“#”>Mehr>></a> </p> </div> 

or you can separate the line in two properties

  #bg--service { background-image: url('http://www.sternwarte-radebeul.de/Images_vstw/fotos/sterngucker.jpg'); background-repeat: no-repeat; } 

 <div class="row articles" id="bg--service"> <div class="col-sm-6"> <div class="col-xs-12 article"> <h1>Treuhand und Finanzen</h1> <p>Sie wollen sich auf Ihren Fachbereich konzentrieren, brauchen Unterstützung in Ihren Finanzen, eine Fiskal- oder Steuervertretung oder wollen Ihre Freizeit nicht mit buchhalterischen Fragen belasten?<a href=“#”>Mehr>></a> </p> </div>