Hintergrundbild centrieren

KATERchen · 11.07.2018

Hallo Leute,
ich gebe ja zu, ich habe seit zehn Jahren keine Webseite mehr gebastelt und ziemlich viel vergessen. Doch jetzt zweifle ich wirklich an meinem Versand.
Ich habe einen oberen Bereich (header) einer Seite eingerichtet - mit CSS. In dem Header liegt das header-Image. Erst klappte alles wie es sollte, doch plötzlich klebte das Bild am linken Rand und lässt sich einfach nicht mehr dazu überreden, wieder in die Mitte zu wandern.
Was mache ich da falsch???

Code:

<div id="header">    <div id="header_image"></div>    </div>

Code:

#header{
    background-image: url(../images/header_bg.jpg);
    height: 342px;
    text-align: center;
}

#header_image{
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    width:1280px;
    height:342px;
}

Andre_S · 11.07.2018

Hab es auf meiner Seite im Head so gelöst:
body, html {
width: 980px;
margin: 0 auto;
}
So zentriert sich der ganze Inhalt incl. HG-Bild. In deinem Fall müssten es halt 1280px sein.

KATERchen · 11.07.2018

Das bringt mir nichts. Beim vergrößern des Browsers soll der Hintergrund (header_bg) die ganze Breite ausfüllen. Das Bild (header) jedoch immer in der Mitte sein.
Mit Deinem Beispiel reduziere ich die Seitenbrite von vornherein auf 980px.

KATERchen · 11.07.2018

Habe es jetzt so gelöst:

Code:

#header{
    background-image: url(../images/header_bg.jpg);
    height: 342px;
    text-align: center;
}

#header_image{
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    width:1280px;
    height:342px;
    margin-top: -342px;
}
#container {
    margin: 0 auto;
    text-align: center;
    width: 1280px;
    border: solid black 0px;
}

Code:

<body>


<div id="header"></div>                   
                       
<div id="container">
    <div id="header_image"></div>
</div>

Myhar · 11.07.2018

Wenn du das so verwendest dann möchtest du nicht, dass deine Seite auch einmal responsive (also auch auf Smartphones etc.) anständig dargestellt wirst? Falls du das doch möchtest verwende keine fixen Pixelwerte für Höhe und Breite.

KATERchen · 11.07.2018

Mhhh, Smartphones gab es damals noch nicht, daher ist das neu für mich. Ich gehe aber eh davon aus, dass ich dafür eine eigene Version der Seite schaffen muss. Bin aber für alle Tipps offen.

Andre_S · 11.07.2018

margin: 0 auto; lässt sich natürlich auch ohne Breitenangabe nutzen.

Chris_EDI · 12.07.2018

In Anlehnung an diese Seite
wird das Hintergrundbild horizontal und vertikal in die Mitte gesetzt. Vielleicht hilft dir das weiter.

Code:

#pixels { background-position: 50% 50%; }

KATERchen · 13.07.2018

Mhh, ich bin jetzt ein bisschen verwirrt. Wo soll ich die festen Pixelangaben weglassen? Beim Hintergrundbild geht das nicht, da es sonst nicht angezeigt wird und wenn ich sie im Container weglasse, wird die Seite über die ganze Breite angezeigt, was sie aber nicht soll.

expressisverbis · 13.07.2018

wie wäre es mit:

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}