it-swarm.com.de

so stellen Sie sicher, dass das Div BG-Bild im Vollbildmodus angezeigt wird und der Inhalt darunter angezeigt wird

Ich habe dieses Thema in den letzten 2 Tagen durchgesehen, mehr als 250 Codevarianten ausprobiert und bin am Ende. Deshalb bin ich jetzt hier ... Ich bin der Meinung, dass ich einer Lösung sehr nahe bin hoffentlich kann es hier jemand über den Rand bringen ... Ich bin ziemlich neu in CSS, also entschuldige ich mich, wenn ich weit weg von der Basis hier bin ...

Ich versuche einen Effekt zu erzielen, den Sie auf der Homepage von stumbleupon.com sehen können. Beim Laden der Seite passt das Hintergrundbild unabhängig von der Auflösung perfekt in den sichtbaren Bereich des Browsers. Das Hintergrundbild ist nicht fixiert und Sie können daher nach unten scrollen, um weitere Inhalte anzuzeigen. Sie können den exakt gleichen Effekt sehen auf http://www.bakkenbaeck.no/ ... wieder passt das Originalbild perfekt und ist nicht mit dem Inhalt unten fixiert.

Ich dachte, ich hätte endlich meine Antwort gefunden, als ich hier auf die Frage und Antwort von StackOverflow stieß Ein Div auf den Startbildschirm anpassen

Ich folgte den Anweisungen dort und kam ach so nah ... aber keine Zigarre.

Sie können meine Testdomain unter www.konnect.co einsehen

Der Code, den ich für dieses BG-Bild eingegeben habe, ist

#wrapper-8 { 
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;

background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat     center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

Dadurch wird das Bild in 2 von mir überprüften Browsern perfekt angezeigt. Das Hintergrundbild überlappt jedoch vollständig den Inhalt des 2. Bereichs auf der Seite. Ich habe eine 2. Division erstellt, ihr eine Hintergrundfarbe gegeben und ein bisschen Inhalt zum Testen hinzugefügt, und es ist unsichtbar, dass es sich hinter dem Hintergrundbild der darüber liegenden Division versteckt. Wenn Sie den Browser verkleinern, können Sie mit dem Scrollen beginnen, wenn das Hintergrundbild kleiner wird. Vermisse ich hier etwas mit der BG-Bild-Div-Höhe? Ich habe verschiedene Höhenoptionen ausprobiert, kann aber nichts ändern. Jede Hilfe wäre sehr dankbar.

7
Chris

Hier ist Ihre Lösung:

Verwenden Sie die absolute Positionierung für beide Klassen und platzieren Sie den Inhalt danach mit top: 100%!

    .image {

      position: absolute;

      width: 100%;

      height: 100%;

      background-image: url(images/bg.jpg);

      background-size: cover;

      background-color: purple;

    }

    .content {

      position: absolute;

      top: 100%;

      width: 100%;

      height: 200px;

      background: yellow;

    }
<div class='image'></div>
<div class='content'>Here is Your solution!!! :-)</div>
10
Eteroxee

Ich versuche, dasselbe zu erreichen wie Sie (zumindest denke ich das). Würde so etwas für dich funktionieren?

http://jsfiddle.net/tKNzR/

html, 
body {
   height:100%;
}

#header-div {
   height:100%;
   width:100%;
   position:relative;
   top:0;
   left:0;
}

Damit ein Bild in # header-div immer den Bildschirm ausfüllt, können Sie ein JQuery-Plugin mit dem Namen backtstretch verwenden.

3
Daniel

Es scheint ziemlich einfach und hat für mich funktioniert.

Ich schaute auf http://www.stumbleupon.com/ und benutzte den Entwicklermodus des Chroms, um den Trick zu bekommen, den sie dazu verwendeten. Die erste div innerhalb des Körpers hat die Klasse homepage, die die folgenden Eigenschaften verwendet

.homepage {
    min-height: 720px;
    position: relative;
    height: 100%;
    background: url(https://nb9-stumbleupon.netdna-ssl.com/zuZ2r1FsBTumc2VqMc6CtA) center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    color: #fff;
}

Der Haken hier ist background-attachment: fixed;. Dadurch wird sichergestellt, dass das Bild nicht zusammen mit dem Inhalt gescrollt wird.

Detaillierte Informationen dazu finden Sie hier:

http://www.w3schools.com/cssref/pr_background-attachment.asp

2
Mukund

Sie benötigen diese Immobilie:

display:table;

CSS

#wrapper-8 { 
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;

background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat     center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;

 display:table;/*Added this*/
}
1
Rajesh Paul

Versuche dies :

body {
    background-image:url('name.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:100% 100%;
    //min-height:100%;
    //min-width:100%;
    background-size:cover;
}
1
ashwin

Wenn Sie in CSS für die # Wrapper-8:

position: absolut; z-Index: -1;

dann wird der Inhalt sichtbar

0
Tom

Got solution remove position: Absolut für das erste Div und in # wrapper-8 geben Sie die minimale Höhe gemäß Ihren Anforderungen an.

0
somesh
html,body,section{ 
  height:100%;
}
.frame1{               /* <section class='frame1'> */
  position: absolute;  /* mama told me never to use this but all my friends do */
  top: 0; right: 0; bottom: 0; left: 0;  /* section shows on load (top:0)*/
  background: url(shot1.jpg) no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.frame2{               /* <section class='frame2'> */
  position: absolute;  /* mama told me never to use this but all my friends do */
  top: 100%; right: 0; bottom: 0; left: 0;  /* section scrolled to (top:100%) */
  background: url(shot2.jpg) no-repeat center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
0
ssomnoremac