Antworten auf deine Fragen:
Neues Thema erstellen

Hintergrundbild centrieren

KATERchen

Aktives Mitglied

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

unverblümt

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

Aktives Mitglied

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

Aktives Mitglied

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

Hat es drauf

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

Aktives Mitglied

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.
 

KATERchen

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben