• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Background-Size nur mit height Angabe?

T

Taucherglocke

Neues Mitglied
Guten Tag,

Ich versuche gerade einer div ein background-image zu geben, welches in voller Größe dargestellt werden soll.
Habe es mit background-size: 100% auto; , background-size:cover; usw. und auch mit den präfixen versucht, jedoch klappt es nicht so wie ich mir das wünsche. Wenn ich der div einen fixen Pixel height verpasse jedoch schon.

Also so ungefähr ist der Aufbau:

<body>
<heade>
<nav></nav>
</header>

<div class="wrap">
<main>
CONTENT
</main>
</div>

<footer></footer>

Natürlich steht da schon deutlich mehr ^^ Aber nur zu veranschaulichung.
Wie ihr seht wollte ich das die div sich mit dem Bild immer bei 100% der Breite hält und die Höhe mit skaliert wird, den Content jedoch mit einer max-width in px begrenzen.

Übersehe ich etwas?
 
Zuletzt bearbeitet:
Na da war ich wohl zu voreilig mit meinem "Hilferuf". Habe es gerade hinbekommen!
Mit height:inherit; funktioniert das Ganze wunderbar ;-)
Ich kam drauf, da (so erkläre ich es mir) div ja ein Kind von von body ist, deswegen habe ich body width und height auf 100% gesetzt und dann mit inherit das ganze weitergegeben. Jedoch ist ein div ja ein Block Element und ich dachte immer Blockelemente nehmen die width und height Angaben ihrer Eltern automatisch an, ausser man definiert eigene, oder? bzw. sich immer über die ihnen mögliche Breite ausdehnen
 
Hier nochmal das genaue CSS dazu:

* {
margin:0;
padding:0;
list-style-type: none;
text-decoration: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}

html, body {
width:100%;
height:100%;
}

div.wrap {
position:relative;
background: url(../Bilder/background.png) no-repeat;
-moz-background-size:cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
height:inherit;
}

Die position:relative; ist nur drin, weil ich eine absolut positionierte Navigation im Maincontent mit habe, insofern für die Funktionalität nicht weiter von bedeutung.

Das HTML wie ich es, ungefähr, verwendet habe steht ja weiter oben.

Hoffe ich konnte euch damit helfen und nicht nur mir ;)

Grüße
Sebastian
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben