1
HTML: (La partie dont je parle est la toute dernière div avec les pngs descendant et falaise.Je veux que le png descendant n'apparaisse que dans cette div et soit positionné au sommet de la falaise png. disparaît. Je ne sais pas ce que je fais lolLorsque je positionne une image sur "fixe", elle disparaît? Je veux qu'il soit positionné au-dessus d'une autre image dans un div?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="css/map_site00.css" />
<style>
body, html {
height: 100%;
margin: 0;
font: 400 13px/1.8 "Lato", sans-serif;
color: #a3000d;
background: black;
}
.bg img {
width: 100%;
}
.bg {
position: relative;
opacity: 0.95;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#bgimg-1 {
background-image: url("images/img_parallax.jpg");
min-height: 100%;
}
.bgimg-2 {
background-image: url("images/drought.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("images/story.jpg");
min-height: 400px;
}
.bgimg-4 {
background-image: url("images/missing1.gif");
min-height: 100%;
}
.bgimg-5 {
background-image: url("images/img_parallax.jpg");
min-height: 100%;
}
.bgimg-6 {
background-image: url("images/smokeysays.jpg");
min-height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
p {
font: 25px "Lato", sans-serif;;
}
h1 {
letter-spacing: 5px;
text-transform: uppercase;
font: 35px "Lato", sans-serif;
color: #fff;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #fff;
}
/* SOLVES IMAGE SIZE PROBLEM in POPUPS */
/*Use !important to Override any other CSS rules that may be affecting an element..."A rule that has the !important property will always be applied no matter where that rule appears in the CSS document"*/
.leaflet-popup-content {
width:auto !important;
}
/*A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element*/
.leaflet-popup-tip {
width: 0px;
height: 0px;
}*/
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bg {
background-attachment: scroll;
}
}
</style>
</head>
<body>
<div style="color: #fff;background-image:url(images/smoke.gif);text-align:center;padding:0px 0px; height: 100%; width: auto; text-align: justify; margin-top:-45px">
<center><p style="color: #aa0000; text-transform: uppercase;font-size: 3.5em; -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
text-shadow:
-.5px -.5px 0 #000,
.5px -.5px 0 #000,
-.5px .5px 0 #000,
.5px .5px 0 #000;">Story from the Ashes</p></center>
<center><p style="color: #fff; text-transform: uppercase; font-size: 2.0em; -webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: black;
text-shadow:
-.5px -.5px 0 #000,
.5px -.5px 0 #000,
-.5px .5px 0 #000,
.5px .5px 0 #000;">Three years ago a strange series of disappearances from Western North Carolina occurred promoting surrounding authorities to search the area for the missing individuals. The disappearances took place over a period of about 6 months and beginning with a young women who went missing during a hiking trip with her best friend in Nantahala National Forest. </p></center>
<center><img src="images/arrow.png"></img></center>
</div>
<div class="bgimg-4 bg">
<div class="caption">
<h1 style="text-align:center;">Images found on missing woman's social media hours before dissapearance along side a news segment</h1>
</div>
</div>
</div>
<div class="bgimg-3 bg" style="height: 100%; position: relative">
<img src="images/falling.png" style=" z-index:2; height: 150px; width: 150px; left: 65%; position: fixed"></img>
<img src="images/cliff.png" style="height: 70%; width: 50%; margin-top: 26%; margin-left: 50%"></img>
</div>