J'ai recherché ce sujet au cours des 2 derniers jours consécutifs, essayais plus de 250 variations de code et je suis à ma fin, c'est pourquoi je suis maintenant ici ... je me sens très proche de une solution, espérons-le que quelqu'un ici puisse la mettre sur le bord ... Je suis assez nouveau à CSS, donc si je suis vraiment de base ici, je m'excuse ...
J'essaie d'atteindre un effet que vous pouvez voir sur la page d'accueil de StumbleUpon.com. Lorsque la page est chargée, l'image BG s'intègre parfaitement dans la zone visible du navigateur, quelle que soit sa résolution. L'image BG n'est pas corrigée et vous pouvez donc faire défiler vers le bas pour voir plus de contenu. Vous pouvez voir exactement le même effet sur http://www.bakkenbaeck.no/ ... à nouveau original L'image convient parfaitement et n'est pas corrigée avec du contenu ci-dessous.
Je pensais enfin trouvé ma réponse quand je suis tombé sur la question de Stackoverflow et répondez ici J'ai suivi des instructions et est venu Oh-So-Fermer ... mais pas de cigare. Vous pouvez voir mon domaine de test que j'ai défini sur www.konnect.co Le code que j'ai entré pour Cette image BG est ceci affiche parfaitement l'image dans 2 navigateurs que j'ai vérifié. Cependant, l'image BG se chevauche complètement le contenu du 2e DIV sur la page. J'ai créé un 2nd Div, lui donna une couleur BG et ajouté un peu de contenu à tester, et il est invisible de se cacher derrière l'image BG de la DIV au-dessus de celle-ci. Si vous redimensionnez le navigateur à une taille plus petite, il vous permettra ensuite de commencer à faire défiler lorsque l'image BG devient petite. Est-ce que je manque quelque chose avec la hauteur de bg image division ici? J'ai essayé plusieurs options de hauteur mais je ne peux rien faire changer. Toute aide serait grandement appréciée.
8 Réponses :
Si vous mettez dans CSS pour le # wrapper-8:
Position: absolu; z-index: -1;
Ensuite, le contenu sera visible
Cela semblait amener le contenu de la 2e Div's directement chevauchant l'image BG de Div 1 ... Je veux que le 2e DIV s'asseoir sous l'image BG de Div 1 afin que vous fassiez faire défiler le contenu ... Ce changement est Cacher l'image BG ... Je laisserai les changements sur www.konnect.co pour que vous puissiez voir ...
Est-ce que j'ai peut-être besoin de changer le 2e Div CSS pour la positionner en quelque sorte? Je ne comprends que de comprendre pourquoi l'image BG de la 1ère Div se chevauchait le 2e Div.
Solution obtenue Supprimer la position: Absolute pour le premier DIV et dans # wrapper-8 donnent une hauteur minime selon vos besoins.
wrapper-8 est le premier div ... retirez-le de là?
Cela semblait mettre le 2e div au-dessous du premier (verticalement) comme je voulais cependant que le premier div avec l'image n'a pas de hauteur ... N'hésitez pas s'il vous plaît n'hésitez pas à regarder sur konnect.co pour voir ce que je parle .. .
Supprimer la position absolue pour # wrapper-8 et donner une hauteur min-hauteur à # wrapper-8 à partir de maintenant, il a une hauteur minimale: 0px; Donnez cette hauteur en fonction de votre requérement (et désolé pour une réponse tardive)
J'essaie d'obtenir la même chose que vous le faites (au moins je le pense). Serait quelque chose comme ça de travail pour vous?
http://jsfiddle.net/tknzr/ p >
html,
body {
height:100%;
}
#header-div {
height:100%;
width:100%;
position:relative;
top:0;
left:0;
}
Essayez ceci:
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;
}
Vous avez besoin de cette propriété:
#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*/
}
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;
}
Voici votre solution:
Utilisez un positionnement absolu sur la classe et placez le contenu après le sommet: 100%! P>
p>
<div class='image'></div> <div class='content'>Here is Your solution!!! :-)</div>
Ce serait une excellente solution, mais il y a une barre de défilement horizontale. Reproductible en chrome.
N'y a-t-il aucune solution pour la barre de défilement horizontale?
Il semble assez simple et travaillé pour moi.
J'ai regardé http://www.smbleUpon.com / et utiliser le mode développeur de Chrome obtenu le truc qu'ils le faisaient. Le premier la capture ici est Vous pouvez trouver des informations détaillées dessus ici: http://www.w3schools.com/csrsref/pr_background-atachment.asp div inside a la classe page d'accueil qui utilise les propriétés suivantes Contexte: fixe: fixe; . Cela garantira que l'image ne fait pas défiler avec le contenu.
Avez-vous déjà trouvé une solution à cela?