ein Hintergrundbild mit div Id

mit

Grundsätzlich ich was Gerät hier zu tun versuche: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position ein Hintergrundbild mit div Id

im Hintergrund mein Bild Haben Sie hat eine ID auf einem div.

#wrapper { 
 
\t height: 900px; 
 
\t width: 900px; 
 
\t border: solid black; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#idbackground { 
 
    background-image: url("http://i.imgur.com/7h8ejPJ.png"); 
 
    width: 324px; 
 
    height: 250px; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position:center center; 
 
}

<DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
 
<div id="idbackground"></div> 
 

 

 
</div> 
 

 
</body> 
 
</html>

statt das Bild zentriert verschwindet ..

Quelle

2016-04-09 BlueHorse

Nun, es wird hier nicht funktionieren, da die Verknüpfung zu Ihrem Bild nicht existiert. Ist der Pfad auf Ihrer aktuellen Seite korrekt? Überprüft die Konsole auf Fehler? – j08691

ist der Kodierungssound obwohl? – BlueHorse

Sie haben vergessen, ein Semikolon nach dem

background-image: url("http://i.imgur.com/7h8ejPJ.png")

width und height Eigenschaft zu Ihrem Bild div zu 100% auch hinzuzufügen.

#wrapper { 
 
\t height: 900px; 
 
\t width: 900px; 
 
\t border: solid black; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#idbackground { 
 
    background-image: url("http://i.imgur.com/7h8ejPJ.png"); /* add semicolon here*/  
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position:center center; 
 
    width:100%;   /*add width*/ 
 
    height:100%;   /*add height*/ 
 
}

<DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
 
<div id="idbackground"></div> 
 

 

 
</div> 
 

 
</body> 
 
</html>

Das Problem wurde von Ihnen eine Breite und Höhe und die Bildeinstellung wurde innerhalb dieser eingewickelt, so dass das Bild mit in diesen Grenzen beschränkt war und daher sehen Sie das Teil des Bildes ist nicht sichtbar, und auf Scroll vollständig verborgen wird es, weil das Bild div

.. nach oben gescrollt wird

Quelle

2016-04-09 23:01:01

Sie sind der Held von heute. – BlueHorse

Froh, dass ich helfen konnte :) @BlueHorse –

background-image: url("http://i.imgur.com/7h8ejPJ.png") fehlt ; am Ende der Linie.

Quelle

2016-04-09 22:59:28 debute

machte den Fehler in der Geige. zeigt immer noch nicht die Bildmitte an. – BlueHorse

Es ist eine 'background-position: fixed;' was Probleme mit 'background-position: center center;'. Nun, ich bin ein bisschen verwirrt, habe noch nie so etwas probiert, aber es scheint wie 'background-position: fixed; 'hat den gleichen Effekt wie' position: fixed;'. Also, es gilt für die Dokumentengröße. Versuchen Sie, die Größe Ihres # idbackgrounds zu erweitern. – debute

Ihr Code ist ein Semikolon am Ende der Erklärung fehlt ... es sollte

#idbackground { 
    background-image: url("http://i.imgur.com/7h8ejPJ.png"); 
    .... 
}

sein

Das Semikolon muss zwischen den einzelnen Deklarationen getrennt werden. Es darf nur entfernt werden, wenn die Deklaration die letzte ist.

Quelle

2016-04-09 23:02:14

machte den Fehler in der Geige. zeigt immer noch nicht die Bildmitte an. – BlueHorse

Das funktioniert perfekt für mich.

#idbackground { 
background: url(http://i.imgur.com/7h8ejPJ.png) 
}

Quelle

2016-04-09 23:10:42

aber wer war "background-position: center center;" ? – BlueHorse

@BlueHorse ive nie verwendet backgorund-position: center center; aber ich denke background-position: center; würde den Samme-Weg arbeiten. beachte, dass ich nicht der Beste in css soo bin, kann ich hier falsch liegen –

Wie Reddy sagte, machen Sie Ihre width und height gleich 100% in Ihrem Bild div.

Sollten Sie jemals ein nicht-quadratisches Bild verwenden, verwenden Sie min-width und min-height Eigenschaften mit einem Wert von 100% bis zu der Achse, die größer ist.

Auch wenn Sie möchten Sie sich die Eingabe durch die Konsolidierung alle Ihre background Eigenschaften in einer Stenografie background Eigenschaft wie solche retten ...

 #idbackground { 
     background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center; 
     height: 100%; 
     width: 100%; 
    }

Der Kurz Syntax für die background Eigenschaft ist wie folgt ..

background: [color] [url(img.jpg)] [repeat_value] [attachment_value] [position_value(s)];

nur sicherstellen, dass Sie Leerzeichen zwischen jedem Wert und die eingeklammerten Elemente mit dem entsprechenden background- vorgegebenen Wert ersetzen. Wenn sie weggelassen oder leer sind, werden sie nur auf ihre Standardwerte gesetzt.

So wäre eine aufgeräumte Version ...

#wrapper { 
     height: 900px; 
     width: 900px; 
     border: solid black; 
     margin-left: auto; 
     margin-right: auto; 
    } 

    #idbackground { 
     background: url("http://i.imgur.com/7h8ejPJ.png") no-repeat fixed center; /* consolidated background shorthand */ 
     height: 100%; 
     width: 100%; 
    }

... mit dem gleichen HTML-Markup.

Quelle

2016-04-10 01:52:55

ein Hintergrundbild mit div Id

Antwort

Verwandte Themen