background-image margin auto?
das
- css
0 Gerhard0 suit0 Gunnar Bittersmann
hi
ich habe folgendes Problem:
Ich arbeite an einer Seite mit width:950px und height:480px. Damit der Inhalt bei höheren Auflösungen nicht so einsam in einer Ecke steht ist die Seite mit margin:auto zentriert.
Jetzt gibt es aber ein Hintergrundbild, welches leider absolut positioniert werden muss, damit es zum Inhalt passt.
Bei höheren Auflösungen bleibt das bg-image also an seiner Position, während der Inhalt schön zentriert wird.
Ich kann das Bild auch nicht in die <div id="content"> schreiben, da eben der Inhalt die Größe bestimmt und somit Teile vom Bild abgeschnitten werden.
Also, gibt es eine Möglichkeit einem background-image den Befehl margin:auto zu geben, so dass das Hintergrundbild bei größeren Browserfenstern mit dem Inhalt zentriert wird?
Oder ist es möglich, das background-image trotz fester Größer der <div> trotzdem komplett, also über den Rand hinaus anzeigen zu lassen?
Ich hoffe ich konnte das Problem so gut es geht schildern :)
Vielen Dank schon mal!
Wenn mich nicht alles täuscht ist
background-position:center center;
das, wonach du suchst.
lG, Gerhard
Wenn mich nicht alles täuscht ist
background-position:center center;
das, wonach du suchst.
Danke für deine Hilfe!
das ist schonmal nicht schlecht, jetzt wandert das bg-image schonmal mit!
allerdings wird es leider immer noch abgeschnitten. Ich verstehe nur nicht warum, dar meine main-div doch in höhe und breite 100% hat?
hiermal mein code, hab leider dran rumgefummelt, also nicht mehr schön..
<div id="main">
<div id="content">
<div class="willkommen">
<img src="pics/bild1.jpg" width="600" height="138"/>
</div>
</div>
<div id="mainmenu_bg">
<div id="mainmenu"><a href="index.html"><img.....</a>
</div>
</div>
</div>
#main {
width:100%;
height:100%;
background-image:url(../pics/bg/monster_bg.jpg);
background-repeat: no-repeat;
background-position:center;
}
#content {
margin:auto;
}
.willkommen {
text-align:right;
}
#mainmenu_bg {
background-image:url(../pics/menu/menu_bg.jpg);
height:50px;
}
#mainmenu {
width:950px;
height:50px;
}
vielleicht hilft es jemandem weiter..
bei "main" ins css "position:absolute;" schreiben
dann wird die größe glaube ich nicht mehr vom inhalt bestimmt und deshalb das bg-image nicht abgeschnitten..
Also, gibt es eine Möglichkeit einem background-image den Befehl margin:auto zu geben, so dass das Hintergrundbild bei größeren Browserfenstern mit dem Inhalt zentriert wird?
background-position kennst du?
Oder ist es möglich, das background-image trotz fester Größer der <div> trotzdem komplett, also über den Rand hinaus anzeigen zu lassen?
Nein.
Ich hoffe ich konnte das Problem so gut es geht schildern :)
Nicht wirklich.
@@das:
nuqneH
Bei höheren Auflösungen
Auflösung ist irrelevant. Du meinst: bei größeren Browserfenstern.
Also, gibt es eine Möglichkeit einem background-image den Befehl margin:auto zu geben, so dass das Hintergrundbild bei größeren Browserfenstern […]
Siehste: bei größeren Browserfenstern. Befehle gibt es in CSS keine.
[…] mit dem Inhalt zentriert wird?
Du willst ein Hintergrundbild http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=positionieren.
Qapla'