Hintergrundbild beim Vergrößern der Fensterbreite wiederholt

Question

ich versuche, eine Seite zu erstellen, die ein Hintergrundbild zwischen header und footer hat, funktioniert auf jeder Bildschirmgröße.

Ich habe es geschafft, die Seite zu erstellen, und es funktioniert gut auf dem Desktop-Bildschirm. Das Problem, das ich habe, ist, wenn ich auf mobile size screen die Größe verändere, dann wird der Hintergrund wiederholt.

Hier ist mein Code:

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: none; 
    border: none; 
} 

Hat die Höhe Attribut in einer bestimmten Höhe festgelegt, aber ich bin nicht sicher, wie ich das ändern kann, so dass es auf allen Bildschirmgrößen arbeitet.

Die Seite kann eingesehen werden unter: http://s116169771.websitehome.co.uk/testsite/

Wenn jemand bitte beraten konnte, wie ich dieses Problem beheben könnte, es wirklich zu schätzen würde.

Vielen Dank im Voraus.

Answer 1

none ist kein gültiger Wert für background-repeat, stattdessen no-repeat verwenden.

background-repeat Eigenschaft (MDN) (W3Schools)

Answer 2

ändern background-repeat: none;-background-repeat: no-repeat;none ist kein gültiger Wert für background-repeat Eigenschaft.

Code sollte sein:

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    border: none; 
} 

Sie auch kurzerhand css background Eigenschaft wie folgt verwendet werden:

div { 
    width: 100%; 
    height: 5886px; 
    background: url('services-yellow.jpg') no-repeat 100% auto; 
    border: none; 
} 

More Details

Answer 3

Here is a list möglicher Werte für background-repeat, Sie Notwendigkeit:

background-repeat: no-repeat; 

Keine existiert für diese Eigenschaft nicht.

Answer 4

Verwenden background-repeat:no-repeat

div { 
    width: 100%; 
    height: 5886px; 
    background-image: url('services-yellow.jpg'); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    border: none; 
} 

oder einfach kurz den Code

div { 
    width: 100%; 
    height: 5886px; 
    background: url('services-yellow.jpg') no-repeat 100%; 
    border: none; 
}