Erledigt - Größeres Bild in kleinerem Div Zentrieren

[Daniel_Knecht]

Hallo,
ich habe nach sehr langer Zeit mal wieder ein Problemchen
Und zwar habe ich einen Div welcher ca. 80% der gesamten Breite der Seite einnimmt. In diesem Div möchte ich nun ein Bild welches viel Breiter als der Div ist Horizontal Mittig Zentrieren.
Das ist Wichtig weil genau in der Mitte des Bildes ein Text steht der auch immer Mittig in dem Div stehen soll doch ich bekomme es einfach nicht hin

Hier mein CSS für den Div:

#header {
    background: #f6f6f6;
    width: inherit;
    height: 200px;
    position: relative;
    overflow: hidden;
}

Wie muss nun aber der CSS Code für das Bild (img) aussehen?
Irgendwas mit position: absolute; aber was noch?
Ich habe schon einiges Probiert aber jedes mal ist das Bild entweder Links oder Rechts am Div angedockt.

Ich hoffe ihr könnt mir helfen

 

[patrick_l]

Ich habe schon einiges Probiert aber jedes mal ist das Bild entweder Links oder Rechts am Div angedockt.

Hi Daniel, du kannst deine Inhalte auf mehre Wege zentrieren. Um jetzt bei der von dir angesprochenen absoluten Positionierung zu bleiben. Gib dem Bild ein "position absolute". Zusätzlich von links 50% sowie ein margin-left. Der Wert des margin-left ergibt sich aus dem von dir eingebundenem Bild. Wenn also das Bild oder die Grafik eine Breite von 500 Pixel hat, so muss der Abstand nach links (margin-left) 250 Pixel betragen.

img {
    position: absolute;
    left: 50%;
    margin-left: -250px;
}

Liebe Grüße, Patrick

 

[Daniel_Knecht]

Genau so hatte ich es vorhin auch noch Probiert nachdem ich das Thema erstellt hatte.
Wenn ich es aber so mache ist das Bild komplett weg.

#header {
    background: #fff;
    width: inherit;
    height: 200px;
    position: relative;
    overflow: hidden;
}
    .headerBanner {
        margin-left: 1440px;
        left: 50%;
        position: absolute;
    }

Edit: Ja so schnell passierts
Evtl. hast du es jetzt auch nur vergessen aber das margin-left muss ein Negativ Wert sein also:

.headerBanner {
    margin-left: -1440px;
    left: 50%;
    position: absolute;
}

Danke dir trotzdem

 

[patrick_l]

Edit: Ja so schnell passierts
Evtl. hast du es jetzt auch nur vergessen aber das margin-left muss ein Negativ Wert sein also:

Klar, muss natürlich ein negativer Abstand nach links sein. Lediglich beim tippen vergessen. Ich habe meinen Post mal editiert. Was jetzt dein Problem angeht. Poste bitte mal das dazugehörige Markup. Noch besser wäre ein Upload deiner Seite.

Liebe Grüße, Patrick

 

[Daniel_Knecht]

Ein Upload meiner Seite gebe ich derzeit noch nicht da diese noch nicht Fertig ist und später eh für jeden Zugänglich ist

Hier jedoch mal die Ausschnitte:

#top {
    width: 100%;
    height: auto;
}
    #header {
        background: #fff;
        width: inherit;
        height: 200px;
        position: relative;
        overflow: hidden;
    }
        .headerBanner {
            margin-left: -1440px; /* Original Breite / 2 (als Negativwert!) */
            left: 50%;
            position: absolute;
        }

<div id="top">
    <div id="header"><img src="img/headerBanner.jpg" class="headerBanner" /></div>
</div>

 

[Ilse_Schnick]

Kannst du das Bild nicht einfach als Hintergrundbild in das div einbauen?

background-position: center center;

Dann braucht es auch keine negativen Werte

...nur noch mal so ein Gedanke

 

[patrick_l]

Kannst du das Bild nicht einfach als Hintergrundbild in das div einbauen?

Das Bild kann nicht als background-image eingebunden werden, da dieses größer als die eigentliche Division ist. Siehe ersten Post des TE:

In diesem Div möchte ich nun ein Bild welches viel Breiter als der Div ist Horizontal Mittig Zentrieren.

Da bleibt an sich nur das Arbeiten mit position und die Vergabe eines z-index. @Daniel_Knecht Dein Bild hat eine Breite von 2880 Pixel? Ich kann dir an dieser Stelle eigentlich nur davon abraten, Bilder mit solchen Maßen zu verwenden.

Liebe Grüße, Patrick

 

[Ilse_Schnick]

Das Bild kann nicht als background-image eingebunden werden, da dieses größer als die eigentliche Division ist. Siehe ersten Post des TE:

Da bleibt an sich nur das Arbeiten mit position und die Vergabe eines z-index. @Daniel_Knecht Dein Bild hat eine Breite von 2880 Pixel? Ich kann dir an dieser Stelle eigentlich nur davon abraten, Bilder mit solchen Maßen zu verwenden.

Liebe Grüße, Patrick

Hallo Patrick,

ja hab ich gelesen, mir ist nur nicht klar, ob das Bild komplett angezeigt werden soll der nicht...

Wenn nur das Bild zentriert und ein zentrierter Text, der ja über dem Bild liegen soll, dann müsste ein background voll und ganz den Zweck erfüllen... der wird doch unabhängig von seiner Größe angezeigt und im Bedarfsfall links und rechts abgeschnitten...

Es mach doch keinen Sinn ein div mit 80% auszugeben und darüber ein Bild zu legen, dass wesentlich größer als 100% der Anzeige ist...

Hier:


der Background ist 3840 px breit


Wie dem auch sei...

 

[patrick_l]

ja hab ich gelesen, mir ist nur nicht klar, ob das Bild komplett angezeigt werden soll der nicht...

Zugegeben, mir auch nicht. Zumal oben im Snippet ein "overflow: hidden" gesetzt wurde.

Es mach doch keinen Sinn ein div mit 80% auszugeben und darüber ein Bild zu legen, dass wesentlich größer als 100% der Anzeige ist...

Ohne das Layout zu kennen, kann ich nicht sagen ob es Sinn macht oder nicht. Kommt halt ganz darauf an, wie was wo dargestellt und/oder positioniert werden soll. Wie dem auch sei, das verwendete Bild ist so oder so zu groß und hat in der Größe auf einer Website eigentlich nichts verloren. Zumindest was das Layout betrifft.

Liebe Grüße, Patrick