Bild links und rechts abschneiden statt zusammenpressen

[Miratek]

Hallo,
ich habe ein Bild, dass 1920x500 Pixel groß ist. Wenn man den Browser kleiner macht, will ich, dass das Bild zentriert bleibt und links und rechts etwas abgeschnitten wird - und nicht, dass das Bild zusammengedrückt wird.

Wie ist das möglich?

Gruß Lukas

 

[djheke]

Wenn es ein Hintergrundbild im übergeordneten Div ist. Kannst du mit background:url(bild.xxx) no-repeat center top; positionieren.

 

[Miratek]

Danke schonmal für deine Hilfe.
Das ist der Code vom div-Container mit dem Bild:

#Bild {
margin-top:129px;
background-image:url(Bild.jpg);
background-repeat:no-repeat;
background-position:center;
}
​

Aber es funktioniert trotzdem nicht? was meinst du mit:

top; positionieren.

?

Gruß

 

[scbawik]

Danke schonmal für deine Hilfe.
Das ist der Code vom div-Container mit dem Bild:

#Bild {
margin-top:129px;
background-image:url(Bild.jpg);
background-repeat:no-repeat;
background-position:center;
}
​

Aber es funktioniert trotzdem nicht? was meinst du mit:

?

Gruß

Was bedeutet "funktioniert nicht"?
Hat das div überhaupt eine Höhe oder Breite?

 

[djheke]

Wenn du die BG-Grafik horizontal und vertikal Positionieren willst kann top weg. Allerdings - und daß habe ich vergessen, musst du eine Mindesthöhe und eine Mindestbreite angeben. Obwohl keiner weiß, ob die Grafik mitscrollen oder fixed sein soll.

 

[Miratek]

Jetzt ist es aber immernoch wie am Anfang mit

#Hauptbild {
height:500px;
min-width:970px;
margin-top:129px;
background- image:url(screenhighdef.jpg);
background-repeat:no-repeat;
background-size:cover;
}​

Was is falsch?
Das Bild soll übrigens wie Text ganz normal mitscrollen.

 

[djheke]

so muss es funktionieren.

#hauptbild {
height:500px;
min-width:970px;
margin-top:129px;
background-image:url(tiger.jpg);
background-repeat:no-repeat;
background-position:center top;
}

 

[Miratek]

So habe ichs jetzt drin:

#Hauptbild {
height:500px;
min-width:970px;
margin-top:129px;
background-image:url(schneehighdef.jpg);
background-repeat:no-repeat;
background-position:center top;
}​

Aber das Bild wird immernoch zusammengepresst, wenn der Browser kleiner gemacht wird. Und jetzt erscheint das Bild einmal komplett und rechts daneben nochmal ca. 100pixel davon?

Gruß Lukas
Hast du Skype`?

 

[scbawik]

So habe ichs jetzt drin:

#Hauptbild {
height:500px;
min-width:970px;
margin-top:129px;
background-image:url(schneehighdef.jpg);
background-repeat:no-repeat;
background-position:center top;
}​

Aber das Bild wird immernoch zusammengepresst, wenn der Browser kleiner gemacht wird. Und jetzt erscheint das Bild einmal komplett und rechts daneben nochmal ca. 100pixel davon?

Gruß Lukas
Hast du Skype`?

background-size und background-repeat.
Wenn das nicht klappt poste einen Link zur Seite, sonst bringt das nichts.

 

[Miratek]

Ich möchte ihn ungern posten. Hast du Skype, wo ich dir ihn privat zukommen lassen kann?
Ich hab auf einer extra Seite das gleiche gemacht, und da hat es funktioniert!
Ich stelle den ganzen CSS-Code rein, der das Bild betrifft:

HTML-CODE:

<div id="website">

<div id="main">

<div id="Hauptbild">
</div>​

</div>​

</div>​

CSS-CODE:

#website {
background-color:F1F1F1;
}
#main {
font-family: arial, verdana, sans-serif;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#Hauptbild {
height:500px;
min-width:970px;
margin-top:129px;
background-image:url(Bild.jpg);
background-repeat:no-repeat;
background-position:center top;
>>DAS IST DER DIV MIT DEM BILD
}
​

Danke für eure Hilfe - wo liegt der Fehler? :(

Gruß Lukas

 

[Miratek]

Ich habe den Fehler jetzt -> es lag an margin-left:auto; margin-right:auto; beim #main!
Wie kann ich jedoch machen, dass das Bild vertikal auf 500 pixel "zusammengedrückt" wird? Das geht nicht oder?