Backround-image - wird nicht alles angezeigt

[hdd_1]

Hallo

Was muss ich genau machen, damit meine Background Image ganz angezeigt wird. Es zeigt nur soviel wieviel ich Text im .html habe ....

.ztn5{
background: url(../bil_6.png);
background-repeat: no-repeat;

Habe auch probiert: background-size: 700px ..auch 70% ...bringt nichts....

Siehe Bild was ich meine:

Das schwarze (bil_6.png) sollte angezeigt werde, aber es wird nur ganz angezeigt wenn ich viel Text hinzufüge. -_-

Danke
EDIT - EDIT - EDIT ...WICHTIG:

Ich habe es mit

height: 800px;
display: block;

wenn ich height: in % mache ...funktioniert nicht.

erledigt. Aber es wird nicht Responsiv, obwohl ich mit

@media only screen.... arbeite.

Navigation und Text werden angepasst, aber das schwarze "Ding" nicht, es bleibt egal ob iPhone,iPad etc..

Wo mache ich denn Fehler?

 

[patrick_l]

.ztn5 {
    background:url(img/bil_6.png) no-repeat;
/* --| CSS3 |---------- */
    background-size:cover;
}

Davon ab solltest du überlegen, ob es nicht auch ohne Grafik geht. Ich kenne dein Layout und Markup zwar nicht, aber sowie es ausschaut, könntest du auch mit border in gewünschter Größe arbeiten.

Liebe Grüße, Patrick

 

[hdd_1]

@patrick_l Danke, aber funktioniert leider nicht so schade

Ich habe es so gemacht, so funktioniert (bis jetzt)

.ztn5{
background: url(../bil_6.png);
background-repeat: no-repeat;
height: 840px;
/*display: block;*/
background-position: center;
}

EDIT:

@patrick_l Ich habe dir meinem Link per PM gesendet, wenn es für dich Ok ist.

 

[patrick_l]

Danke, aber funktioniert leider nicht so schade

Du musst dem Element mit der Klasse .ztn5 auch eine Höhe und Breite geben. Habe ich jetzt nur ausgelassen. Dann funktioniert es auch.

@patrick_l Ich habe dir meinem Link per PM gesendet, wenn es für dich Ok ist.

Kein Problem, schon gewohnt

Liebe Grüße, Patrick

 

[Squeendot]

Hallo hdd_1,

Dank CSS3 gibt es jetzt die nette "cover"-Funktion für den Background.
Das heißt ausgeschrieben, das Hintergrundbild wird so skaliert, dass kein Rand entsteht:

background-size: cover;

Das ist übrigens auch responsiv!
Man muss halt nur auf die Browserunterstützung achten.


Lieber Gruß,

Julian