nicht angemeldet
Bild Browserfüllend, und trotzdem soll nach unten gescrolt werde
0 1 
Matthias Apsel
Bild Browserfüllend, und trotzdem soll nach unten gescrolt werde
Gunnar BittersmannEs geht um folgendes. Ich möchte gerne meine Seite in mehrere Bereiche aufteilen, die ein unterschiedliche Höhe haben. Zuerst soll ein Bereich sein, der genau den Browser ausfüllt und der Inhalt, das Bild soll sich ihm anpassen.
---------------------
!
!
! Bild
!
!
---------------------
!
! Text
!
---------------------
!
! Text
!
---------------------
Man sollte ABER auch in die anderen Bereiche Textbereiche runterscrollen können.
unter der URL findet ihr ein Beipiel: http://jsfiddle.net/nhtdupjb/1/
Vieleicht findet sich hier jemand der mir da weiterhelfen kann!
Moni
-
unter der URL findet ihr ein Beipiel: http://jsfiddle.net/nhtdupjb/1/
Vieleicht findet sich hier jemand der mir da weiterhelfen kann!
Moni
Hallo Moni,
versuch mal folgendes css
body, html {
height:100%;
}
#header {
background-image: url("http://magazin.salzburgerland.com/wp-content/uploads/2012/08/hochkonig-007.jpg");
width:100%;
margin-bottom: 10%;
height:100%;
}
#box1 {background:#ff0000;height:400px;}
#box2 {background:#c0c0c0;height:400px;}-
Ja super es klappt, danke Gregor.
http://jsfiddle.net/nhtdupjb/6/
doch wenn der Browser breiter als das Bild is wirde dieses wiederholt.
Das habe ich mittels no-repeat unterbunden.Do wie bekomme ich das das Bild auch noch gezommt hin.
Hallo Moni,
versuch mal folgendes css
body, html {
height:100%;
}
#header {
background-image: url("http://magazin.salzburgerland.com/wp-content/uploads/2012/08/hochkonig-007.jpg");
width:100%;
margin-bottom: 10%;
height:100%;
}
#box1 {background:#ff0000;height:400px;}
#box2 {background:#c0c0c0;height:400px;}-
Ja super es klappt, danke Gregor.
http://jsfiddle.net/nhtdupjb/6/
doch wenn der Browser breiter als das Bild is wirde dieses wiederholt.
Das habe ich mittels no-repeat unterbunden.No-Repeat muss rein genau oder das Bild muss noch breiter sein.
Do wie bekomme ich das das Bild auch noch gezommt hin.
Hab dir noch ein Beispiel eingespielt. Vielleicht ist es das Ergebnis, welches du gern hättest
-
Hi Gregor,
http://jsfiddle.net/nhtdupjb/8/
jetzt klappt die Breite, aber die Höhe ist jetzt höher als das BrowserFenster.
Irgendwie müssen die beiden Fassungenzusammen kommen.
Höhe des Browserfensters, und das Bild soll sich der Breite anpassen.
Das ist ja zum verrückt werden.
Moni
-
Hi Gregor,
http://jsfiddle.net/nhtdupjb/8/
jetzt klappt die Breite, aber die Höhe ist jetzt höher als das BrowserFenster.
Versteh ich nicht ganz wie das möglich sein soll :)
Höhe des Browserfensters, und das Bild soll sich der Breite anpassen.
Versuch noch folgendes:
min-height: 1024px; statt der 100%Vielleicht ist es das was du willst.
-
@@Gregor:
nuqneH
Versuch noch folgendes:
min-height: 1024px; statt der 100%Nö.
Vielleicht ist es das was du willst.
Das glaube ich nicht.
Inwiefern sollte 1024px irgendwas mit der Höhe des Browserfensters zu tun haben?
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Hi Gregor,
http://jsfiddle.net/nhtdupjb/8/
jetzt klappt die Breite, aber die Höhe ist jetzt höher als das BrowserFenster.
Ok, habe verstanden was du meinst
Irgendwie müssen die beiden Fassungenzusammen kommen.
Höhe des Browserfensters, und das Bild soll sich der Breite anpassen.
Verstehe
Das ist ja zum verrückt werden.
Moni
Versuch dies
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title><script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
html, body{
width: 95%;
height:100%;}.bgimage{
position:relative;
left: 5%;
min-height: 100vh;
min-width: 100%;
width: 100%;
}
#box1 {background:#ff0000;height:400px;}
#box2 {background:#c0c0c0;height:400px;}</style>
</head>
<body>
<div id="header">
<img src="hochkonig-007.jpg" class="bgimage" />
</div>
<div id="box1">a
</div>
<div id="box2">b
</div></body>
</html>
-
-
-
-
Alternativ könnte auch das hier sein, was du suchst
html, body{
width: 100%;
min-height:100%;}
body, html {
height:100%;
}
#header {}
.bgimage{
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;top: 30px;
width: 100%;
}
#box1 {background:#ff0000;height:400px;}
#box2 {background:#c0c0c0;height:400px;}---------------------------------------------------
<div id="header">
<img src="http://magazin.salzburgerland.com/wp-content/uploads/2012/08/hochkonig-007.jpg" class="bgimage" />
</div>
<div id="box1">a
</div>
<div id="box2">b
</div>
-
-
Om nah hoo pez nyeetz, Moni!
Ohne in das fiddle geschaut zu haben:
Ein Browserfenster hat ja ein bestimmtes Format, ich meine damit nicht nur die Abmessungen selbst, sondern auch das Verhältnis aus Höhe und Breite.
Ich gehe jetzt mal von einem Bild aus, das breiter als hoch ist (landscape). Ich betreibe meinen Browser selten im Vollbild, dafür dürfen sich aber bei mir manchmal zwei Browserfenster den Bildschirm teilen. Ein Browserfenster ist deshalb höher als breit (portrait)
Du musst dir also zu allererst die Frage stellen, wie du verfahren möchtest, wenn das Bild vom Format her nicht passt.
- Möchtest du es verzerren? Ich denke nicht.
- Du möchtest immer die Höhe des Viewports haben. Dafür gibt es die Maßeinheit vh.
- Soll die Originalgröße beibehalten werden und links und rechts abgeschnitten werden?
- Soll das Bild verkleinert werden?
Am besten, du skizzierst dir mal verschiedene (Extrem-)fälle.
Je nach dem wie deine Antwort ausfällt, kann man weiter sehen.
2. Frage
Transportiert das Bild Inhalt, wie eine Illustration in einer Zeitung, ein Firmenlogo oder ein Foto eines Mitarbeiters um den es in der Seite geht?Ist das Bild eher Verzierung oder Schmuck?
Je nach dem wie deine Antwort ausfällt, kann man weiter sehen.
PS: Bitte kein TOFU ;-)
Matthias
-
Lieber Mathias,
ich möchte ´das Bild nicht verzerren.
Ich denke es ollte erst die grösse des auszugebenden Bereiches gefunden werden. Die in meinem Fall die Breite und die Höhe des Fensters des Browsers ist.
Dort sollte das das Bild eingeblendet werden. So das es an der linken und oberen Seite bündig ist, und bei der rechten und unteren Seite abgeschnitten ist.Es sollte aber möglich sein, zwei Bilder untereinander auszugeben, aber eben mit der grösses des Browserfensters.
Weiter dann
---------------------
!
!
! Bild
!
!
---------------------
!
! Text
!
---------------------
!
! Text
!
---------------------
!
!
! Bild
!
!
---------------------MOni
-
Om nah hoo pez nyeetz, Moni!
ich möchte ´das Bild nicht verzerren.
gut.
Ich denke es ollte erst die grösse des auszugebenden Bereiches gefunden werden. Die in meinem Fall die Breite und die Höhe des Fensters des Browsers ist.
Damit möchtest du ein Element haben, welches die Breite 100vw hat und die Höhe 100vh. siehe relative Längenmasße
Damit es da auch ohne Scrollbalken reinpasst, könntest du box-sizing border-box verwenden, oder explizit die Innen- und Außenabstände auf Null setzen. Bei Problemen dazu, schau dich im Wiki um und scheue dich nicht, wieder hier nachzufragen.
Dort sollte das das Bild eingeblendet werden. So das es an der linken und oberen Seite bündig ist, und bei der rechten und unteren Seite abgeschnitten ist.
Du hast jetzt nicht die Frage beantwortet, ob das Bild Inhalt oder Verzierung ist. davon ist abhängig, ob ein Hintergrundbild definiert werden soll oder ein img-Element in das Element hineinkommt, welches in diesem Fall overflow: hidden bekommen müsste.
Matthias
-
Ich denke ich habe es gelösst:
http://jsfiddle.net/nhtdupjb/9/
Für Hinweise auf ein besseres Vorgehen würde ich mich freuen
<div id="header"> </div> <div id="box1">a </div> <div id="box2">b </div>html, body { padding: 0; margin: 0; height: 100%; } #header { background: url("http://magazin.salzburgerland.com/wp-content/uploads/2012/08/hochkonig-007.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } #box1 {background:#ff0000;height:400px;} #box2 {background:#c0c0c0;height:400px;}-
@@Moni:
nuqneH
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;-moz- und -o- machen keinen Sinn, weg damit! -webkit- kannst du für alte Androids noch drin lassen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
