Eine knifflige CSS Frage

HolgerGr

Hallo,

ich kriege es einfach nicht hin, dass sich ein Container über die gesamte Seitenhöhe ersteckt.

Aber ich erzähle am besten mal von Beginn an. Ich habe ein Twentsixteen-Child-Theme komplett leer gemacht und würde die Seite gerne von Grund auf mit dem Pagemaker von SiteOrigin neu aufbauen.
Der Grund ist, dass es ein Hintergrundbild über die gesamte Seitenhöhe und Seitenbreite geben soll, in dem sich ein Hauptmenü befindet.

Das Hintergrundbikld soll also den gesamten Bildschirm einnehmen, egal auf welchem Gerät die Seite abgerufen wird (aber gleichfalls natürlich nicht beim Scrollen weitergeführt werden...ansonsten könnte ich es ja einfach in body einbinden).

Nun kann man mit SiteOrigin ganz simpel Zeilen anlegen und diesen ein Hintergrundbild zuordnen. Diese Zeilen können auch mit einer ID versehen werden womit sie ja eigentlich über CSS angesprochen werden sollten.

Was die Breite angeht, funktioniert es - allerdings nicht bei der Höhe.
Wenn ich height: 100% angebe oder min-height: 100%, passiert rein gar nichts. Gebe ich an gleicher Stelle einen Pixelwert an, klappt es aber ich brauche für die Responsivität einen Prozentwert.

Hier die Testseite: http://wighty.de/10/test/

Vielen Dank und viele Grüße
Holger

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Zitat von HolgerGr

Das Hintergrundbikld soll also den gesamten Bildschirm einnehmen, egal auf welchem Gerät die Seite abgerufen wird (aber gleichfalls natürlich nicht beim Scrollen weitergeführt werden...ansonsten könnte ich es ja einfach in body einbinden).

Kannst du auch so, mit background-attachment:fixed
http://www.w3schools.com/cssref/pr_background-attachment.asp

Das ganze dann noch mit background-size: cover|contain testen
http://www.w3schools.com/cssref/css3_pr_background-size.asp

HolgerGr

Danke Dir SitEctor,

aber damit kreiere ich eine Tapete. Bei dem Pergamenthintergrund (der jetzt allerdings durch ein anderes Bild überschrieben ist, habe ich das so gemacht. Mann kann nicht unter den Bildbereich scrollen bzw. der Bildbereich endet da wo das Bild endet....im Zweifelsfall aber nicht genau am Ende des scrollfreien Seitenbereichs. Es wäre sehr schwierig, das auf allen Endgeräten genau hinzukriegen.

rantanplan2000

Du willst also, beim ersten Ladevorgang der Seite, dass das Bild 100% Höhe hat, beim Scrollen aber sich diese Höhe merkt und dann nach oben verschwindet, wenn man runter scrollt? Javascript-Fall würde ich sagen. Müsstest es eben dauerlaufen lassen das Script .... oder mit 2-3 Sekunden Pausen. Wenn sich die Ansicht ändert z.B. auf einem Smartphone von Hochkant zu Landscape, würde es sonst die Änderung nicht anpassen.

wenn du html, body auf 100% höhe und breite setzt und das bild außerhalb vom container hast, gehts auch nur ... nur past es sich dann eben nicht richtig an, wenn sich was am screen ändert. es gibt auch 16:9, 16:10 usw. das würde so nicht gehen. du müsstest das format auslesen und dann ein passendes bild laden, oder wirds einfarbig?. also doch js.

rantanplan2000

Wie du siehst, so würde es nicht gehen.

HTML

<style type="text/css">
html, body { height: 100%; }
img { 
  width: 100%; 
  height: 100%; 
}
  * {  margin: 0;
  padding: 0;
  border: 0;}
  
  
  .ab {
    background: red;
    padding: 30px 50px;
  }
</style>


<img src="https://images.gutefrage.net/media/fragen/bilder/teacup-schweinchen-gesucht/0_original.jpg?v=1312734130000" />




<div class="ab">
  <h1>Hallo Welt</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus porro totam magnam consequatur maiores sit eaque quam, sed ratione possimus doloremque aperiam explicabo officiis voluptatibus autem perspiciatis sequi cum tenetur.ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur itaque voluptates, obcaecati facilis temporibus aspernatur, at saepe, modi perferendis, et debitis non iste! Explicabo sed mollitia reiciendis asperiores, tenetur!</p>
</div>




<img src="http://www.kirasoftware.com/images/Fotolia_19136022_XS.jpg" />

Alles anzeigen

bzw. warte, du kannst mit overflow: hidden arbeiten! wird zwar was abgeschnitten vom bild, aber die proportion bleibt! das problem mit der anpassung bleibt ohne js aber. die höhe wird eben nur beim ersten laden angepasst und bleibt dann.

oder wie vorposter gesagt hat mit backgroundimage:

Code

<style type="text/css">
html, body { height: 100%; }
img { 
  width: 100% ; 
  height: 100%; 
  overflow: hidden;
}
  * {  margin: 0;
  padding: 0;
  border: 0;}
  
  
  .ab {
    background: red;
    padding: 30px 50px;
  }
  .one {
    background-image: url('https://images.gutefrage.net/media/fragen/bilder/teacup-schweinchen-gesucht/0_original.jpg?v=1312734130000');
    height: 100%;
    background-size: contain;
  }
</style>




<div class="one">
asdasddasasddsaasd
</div>


<div class="ab">
  <h1>Hallo Welt</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus porro totam magnam consequatur maiores sit eaque quam, sed ratione possimus doloremque aperiam explicabo officiis voluptatibus autem perspiciatis sequi cum tenetur.ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur itaque voluptates, obcaecati facilis temporibus aspernatur, at saepe, modi perferendis, et debitis non iste! Explicabo sed mollitia reiciendis asperiores, tenetur!</p>
</div>




<img src="http://www.kirasoftware.com/images/Fotolia_19136022_XS.jpg" />

Alles anzeigen

rantanplan2000

doofe 15 minuten zeitspanne.

hier das gleiche background-img mit cover und contain:

HTML

<style type="text/css">
html, body { height: 100%; }
img { 
  width: 100% ; 
  height: 100%; 
  overflow: hidden;
}
  * {  margin: 0;
  padding: 0;
  border: 0;}
  
  
  .ab {
    background: red;
    padding: 30px 50px;
  }
  .one {
    background-image: url('https://images.gutefrage.net/media/fragen/bilder/teacup-schweinchen-gesucht/0_original.jpg?v=1312734130000');
    height: 100%;
    background-size: contain;
  }
  
    .two {
    background-image: url('http://www.kirasoftware.com/images/Fotolia_19136022_XS.jpg');
    height: 100%;
    background-size:cover;
  }
  
</style>




<div class="one">
asdasddasasddsaasd
</div>


<div class="ab">
  <h1>Hallo Welt</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus porro totam magnam consequatur maiores sit eaque quam, sed ratione possimus doloremque aperiam explicabo officiis voluptatibus autem perspiciatis sequi cum tenetur.ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur itaque voluptates, obcaecati facilis temporibus aspernatur, at saepe, modi perferendis, et debitis non iste! Explicabo sed mollitia reiciendis asperiores, tenetur!</p>
</div>




<div class="two">
asdasddasasddsaasd
</div>

Alles anzeigen

helix

Schau mal, ob du mit der Einheit vh was anfangen kannst: Viewport-Height. Dem Element mit dem Hintergrundbild 100vh geben.

Gruß
helix

rantanplan2000

vh ist halt doof für den IE und der ist halt top 3 browser und grade ältere sind da oft genutzt.
http://caniuse.com/#search=vh

danielgoehr

Zitat von rantanplan2000

Müsstest es eben dauerlaufen lassen das Script .... oder mit 2-3 Sekunden Pausen. Wenn sich die Ansicht ändert z.B. auf einem Smartphone von Hochkant zu Landscape, würde es sonst die Änderung nicht anpassen.

Dafür gibt es doch $( window ).resize und orientationchange.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Eine knifflige CSS Frage

Jetzt mitmachen!