Reputation: 41
I have a background image that repeats but I cant make my text stay on it, as it just floats to the bottom and the image stays at the top of the page. I have the z-index set to bottom but for some reason it just doesn't want to go up. why wont it work? here is my site draft so you can have a general example: codepen
header {
font-family: limelight;
font-size: 40px;
color: #ff8c73;
text-align: center;
text-shadow: 2px 2px 5px;
z-index: z('top')
}
header2 {
font-size: 30px;
color: #ff8c73;
font-family: limelight;
text-align: center;
text-shadow: 2px 2px 5px;
z-index: z('top')
}
#background {
position: absolute;
left: 0px;
top: 0px;
z-index: z('bottom');
width: 100px;
height: 100px;
repeat: repeat;
}
li {
font-size: 17px;
text-shadow: 2px 2px 5px;
line-height: 25px;
z-index: z('top')
}
hr {
width: 400px;
background-color: #e3c4bc;
height: 5px;
z-index: z('top')
}
p {
font-family: grandstander;
color: #e9967a;
text-align: center;
text-shadow: 2px 2px 5px;
font-size: 17px;
line-height: 23px;
z-index: z('top')
}
ul {
font-family: grandstander;
color: #e9967a;
text-align: center;
text-shadow: 1px 1px 5px;
line-height: 20px;
z-index: z('top')
}
cite {
color: #e9967a;
text-align: center;
text-shadow: 2px 2px 5px;
font-size: 17px;
line-height: 23px;
z-index: z('top')
}
#salmonphoto {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
}
#salmonphoto2 {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
background-color: white;
}
#salmonphoto3 {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
background-color: white;
image-height: 15px
}
#salmonjumpgif {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
}
<div style="background-image:url(https://via.placeholder.com/100.png);id:background;width:1300px;height:700px;border:1px; z-index: z('bottom');background-repeat:repeat;">
</div>
<header>Some Salmon Facts</header>
<header>And Some Other Interesting Things Too!</header>
<p>A female Chinook Salmon can lay up to 4,000 eggs.</p>
<p> Salmon don't eat any food during their journey upstream to mate.</p>
<p> The longest ever trip a salmon took upstream to mate was about 3,845 km (or about 2,389 miles) upstream. </p>
<img src=" https://i1.wp.com/www.coopers-seafood.com/wp-content/uploads/2017/01/2pvxb143807351121.gif?resize=600%2C366&ssl=1" style="float: left; width: 195px; height: 150px; margin-left: 1.5%; margin-bottom: 0.5em;" id="salmonjumpgif">
<img src=" https://i2.wp.com/www.coopers-seafood.com/wp-content/uploads/2017/01/0sumr143807319621.jpg?w=750&ssl=1" style="float: right; width: 195px; drop-shadow: 3px; height: 150px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto">
<a href="https://ibb.co/hBKR929">
</a>
<p> The oldest salmon fossil found is about 50 million years old.</p>
<p>During their trip upstream, they can jump up to 6 feet into the air, almost up to 2 metres.</p>
<p> Most salmons will die as a result of exhaustion after their trip to mate. A small percent of survived salmons will mate few more time in their lifetime. </p>
<p> Salmon are rich in essential vitamins and can decrease the risk of coronary disease and certain cancers. </p>
<p> Atlantic salmon sold in the U.S. are all farm raised.</p> <img src="https://earthandstarryheaven.files.wordpress.com/2016/05/tumblr_myfcvcow9e1rvu01lo1_1280.jpg?w=300&h=282" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;"
id="salmonphoto">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9ZiqZFPrarJt9BWaE_SlpiQD494As_Nbjx3Zp8zBLCwf2TMUfI8XMulE4ioaeILSfsbyA8fSe6TeG1A&usqp=CAU" style="float: left; width: 195px; height: 100px; margin-left: 1.5%; margin-bottom: 0.5em;" id="salmonjumpgif">
<p>To get wild salmon, buy Pacific salmon.</p>
<p>Salmon are popular in mythology.</p>
<p>Salmon is a considered a health food.</p>
<p>Salmon are anadromous, which means they are born in fresh water, they migrate to salt water, and then they return to freshwater to spawn.</p>
<p>Grizzly bears love to feast on these fish when they are migrating upstream.</p>
<p>Salmon is a keystone species in Northwest America.</p>
<hr>
<p> There are six types of salmon that are harvested in and around the waters of North America. There is one salmon from the Atlantic Ocean called the Atlantic Salmon, and five from the Pacific Ocean called Chinook, chum, coho, pink, sockeye.</p>
<p>
Salmon in the United States are found mainly on the Northwestern coastline as well as all around Alaska. There is a small amount on the Atlantic coast and there are some in the Great Lakes as well. Aquaculture for salmon is becoming more and more popular
because of the demand for this fish.</p>
<p>Young salmon feed on plankton. As they get older, they feed on other things such as insects, small invertebrates, small fish, and other sea organisms.</p>
<img src="https://media.fisheries.noaa.gov/styles/original/s3/dam-migration/atlantic_salmon_illustration.jpg?null&itok=xFv0Z3dr" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<ul>
<li> <b>Atlantic Salmon -</b> Known also as the black salmon, this fish does not require salt water to live. This species is in decline in the United States and is listed on the Endangered Species List. The average size of the atlantic salmon is 8-12 pounds.
A landlocked Atlantic salmon is a freshwater form of the sea-run Atlantic salmon. They are genetically considered a subspecies of the sea-run Atlantic salmon. They reside in lakes, never making the marine migration. They generally do not grow as large
as sea-run fish, averaging between 12 and 20 inches long.</li>
</p>
<img src="https://media.fisheries.noaa.gov/styles/original/s3/dam-migration/640x427-chinook-salmon.png?null&itok=s7wokwso" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Chinook Salmon -</b> This animal is the state fish of Alaska and is also known as the king salmon. It is the largest of the salmon species and can get up to 125 pounds. Chinook salmon can live a maximum of 7 years. Chinooks can be found in Alaska
(mainly) and down the West coast. The average size of a Chinook is 10-15 pounds. Chinook salmon are anadromous—they hatch in freshwater streams and rivers then migrate out to the saltwater environment of the ocean to feed and grow. Chinook salmon
are the largest of the Pacific salmon, hence the name “king salmon.”</li>
</p>
<img src="http://www.kingsailfishmounts.com/images/categories_images/image1_271.jpg" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Chum Salmon -</b> This fish is found in Alaska down to the Northwest tip of the United States. It occupies the broadest range of any other salmon. The average size of a chum is 10-15 pounds. Chum salmon is one of the largest species of Pacific salmon,
second only to Chinook salmon in size. When in the ocean, chum salmon are metallic greenish-blue along the back with black speckles, similar to both sockeye and coho salmon. As they enter fresh water, their appearance changes dramatically.</li>
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Oncorhynchus_keta.jpeg/220px-Oncorhynchus_keta.jpeg" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Coho Salmon -</b> The Coho salmon, also known as "silvers," is one of the most sought after species and can be found in Alaska and down the West coast. The average size of a coho is 6-12 pounds. Coho salmon are anadromous fish: they are born in freshwater,
migrate to the sea in adulthood and return to freshwater to breed. Coho fry (recently hatched fish) feed primarily on insects, zooplankton and small fish. When they reach the ocean, they add small crustaceans to their diet.</li>
<p></p>
<img src="https://media.fisheries.noaa.gov/styles/original/s3/dam-migration/640x427-pink-salmon.png?null&itok=WBIjRwIO" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Pink Salmon -</b> Also known as "humpies," the pink salmon is the most abundant, yet smallest in size of the species. The average size of a pink salmon is 3-5 pounds. Pink salmon are the smallest of the Pacific salmon found in North America, weighing
between 3.5 and 5 pounds, with an average length of 20 to 25 inches. Pink salmon can be distinguished from other Pacific salmon by the large dark oval spots on their back and entire tail fin as well as their general coloring and form.</li>
<p></p>
<img src="https://wiki.fishingplanet.com/images/f/f8/Sockeye_Salmon.png" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto3">
<li> <b>Sockeye Salmon -</b> Also known as "reds," this is the most colorful (and the most common) of the species and can survive being in lakes and other freshwater. They sometimes even spawn in rivers and lakes. The average size of a sockeye is 5-8 pounds.
The striking orange color of sockeye salmon flesh comes from eating plankton and krill while in the ocean. Landlocked sockeye salmon rarely grow to more than 14 inches in length and are called “kokanee”. Sockeye salmon are the most economically important
species of salmon in Alaska.</li>
<p></p>
<hr> </hr>
<p>
<li>Feeding habits depend on a variety of different factors such as weather, season, and time of day.</p>
</li>
<p>
<li>Find the correct fishing reel that you feel most comfortable using.</p>
</li>
<p>
<li>Use brightly colored lures and add bait and scent to them.</p>
</li>
<p>
<li>Fish for salmon early in the morning or late at night.</p>
</li>
<p>
<li>Salmon tend to stay at the bottom, so use weights.</p>
</li>
<p>
<li>Each state has varying fishing regulations. It is important to educate yourself on them before going out to fish.</p>
</li>
<p>
<li>Remember to acquire a fishing permit if taking up this sport. Fishing without a permit is illegal and could result in a fine.</p>
</li>
<p>
<li>Look at the state's regulations and seasons to find out when you are allowed to fish.</p>
</li>
<p>
<li>Most states have a length limit for their fish. If the fish you caught does not measure the minimum, it is required that you let it go. There are sometimes maximum limits for certain fish as well.</p>
</li>
<p>
<li>Most states also have daily limits, or the amount of a certain fish you can keep in one day.</li>
</p>
</ul>
<cite> https://forum.americanexpedition.us/salmon-information-facts-and-photos </cite>
<cite> https://www.fisheries.noaa.gov/ </cite>
Upvotes: 0
Views: 94
Reputation: 340
So How I solved your problem is, The topmost div
having the background as image is a block element(div is always a block element). A block-level element always starts on a new line and A block-level element always takes up the full width available (stretches out to the left and right as far as it can). Hence It was pushing the text below itself. To overwrite that nature of div I added position:absolute
and then added the z-index: -1
.
header {
font-family: limelight;
font-size: 40px;
color: #ff8c73;
text-align: center;
text-shadow: 2px 2px 5px;
z-index: z('top')
}
header2 {
font-size: 30px;
color: #ff8c73;
font-family: limelight;
text-align: center;
text-shadow: 2px 2px 5px;
z-index: z('top')
}
#background {
position: absolute;
left: 0px;
top: 0px;
z-index: z('bottom');
width: 100px;
height: 100px;
repeat: repeat;
}
li {
font-size: 17px;
text-shadow: 2px 2px 5px;
line-height: 25px;
z-index: z('top')
}
hr {
width: 400px;
background-color: #e3c4bc;
height: 5px;
z-index: z('top')
}
p {
font-family: grandstander;
color: #e9967a;
text-align: center;
text-shadow: 2px 2px 5px;
font-size: 17px;
line-height: 23px;
z-index: z('top')
}
ul {
font-family: grandstander;
color: #e9967a;
text-align: center;
text-shadow: 1px 1px 5px;
line-height: 20px;
z-index: z('top')
}
cite {
color: #e9967a;
text-align: center;
text-shadow: 2px 2px 5px;
font-size: 17px;
line-height: 23px;
z-index: z('top')
}
#salmonphoto {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
}
#salmonphoto2 {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
background-color: white;
}
#salmonphoto3 {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
background-color: white;
image-height: 15px
}
#salmonjumpgif {
border-radius: 50px;
box-shadow: 0 0 20px salmon;
}
<div style="background-image:url(https://via.placeholder.com/100.png);id:background;width:1300px;height:700px;border:1px; background-repeat:repeat; position: absolute; z-index: -1;">
</div>
<header>Some Salmon Facts</header>
<header>And Some Other Interesting Things Too!</header>
<p>A female Chinook Salmon can lay up to 4,000 eggs.</p>
<p> Salmon don't eat any food during their journey upstream to mate.</p>
<p> The longest ever trip a salmon took upstream to mate was about 3,845 km (or about 2,389 miles) upstream. </p>
<img src=" https://i1.wp.com/www.coopers-seafood.com/wp-content/uploads/2017/01/2pvxb143807351121.gif?resize=600%2C366&ssl=1" style="float: left; width: 195px; height: 150px; margin-left: 1.5%; margin-bottom: 0.5em;" id="salmonjumpgif">
<img src=" https://i2.wp.com/www.coopers-seafood.com/wp-content/uploads/2017/01/0sumr143807319621.jpg?w=750&ssl=1" style="float: right; width: 195px; drop-shadow: 3px; height: 150px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto">
<a href="https://ibb.co/hBKR929">
</a>
<p> The oldest salmon fossil found is about 50 million years old.</p>
<p>During their trip upstream, they can jump up to 6 feet into the air, almost up to 2 metres.</p>
<p> Most salmons will die as a result of exhaustion after their trip to mate. A small percent of survived salmons will mate few more time in their lifetime. </p>
<p> Salmon are rich in essential vitamins and can decrease the risk of coronary disease and certain cancers. </p>
<p> Atlantic salmon sold in the U.S. are all farm raised.</p> <img src="https://earthandstarryheaven.files.wordpress.com/2016/05/tumblr_myfcvcow9e1rvu01lo1_1280.jpg?w=300&h=282" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;"
id="salmonphoto">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT9ZiqZFPrarJt9BWaE_SlpiQD494As_Nbjx3Zp8zBLCwf2TMUfI8XMulE4ioaeILSfsbyA8fSe6TeG1A&usqp=CAU" style="float: left; width: 195px; height: 100px; margin-left: 1.5%; margin-bottom: 0.5em;" id="salmonjumpgif">
<p>To get wild salmon, buy Pacific salmon.</p>
<p>Salmon are popular in mythology.</p>
<p>Salmon is a considered a health food.</p>
<p>Salmon are anadromous, which means they are born in fresh water, they migrate to salt water, and then they return to freshwater to spawn.</p>
<p>Grizzly bears love to feast on these fish when they are migrating upstream.</p>
<p>Salmon is a keystone species in Northwest America.</p>
<hr>
<p> There are six types of salmon that are harvested in and around the waters of North America. There is one salmon from the Atlantic Ocean called the Atlantic Salmon, and five from the Pacific Ocean called Chinook, chum, coho, pink, sockeye.</p>
<p>
Salmon in the United States are found mainly on the Northwestern coastline as well as all around Alaska. There is a small amount on the Atlantic coast and there are some in the Great Lakes as well. Aquaculture for salmon is becoming more and more popular
because of the demand for this fish.</p>
<p>Young salmon feed on plankton. As they get older, they feed on other things such as insects, small invertebrates, small fish, and other sea organisms.</p>
<img src="https://media.fisheries.noaa.gov/styles/original/s3/dam-migration/atlantic_salmon_illustration.jpg?null&itok=xFv0Z3dr" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<ul>
<li> <b>Atlantic Salmon -</b> Known also as the black salmon, this fish does not require salt water to live. This species is in decline in the United States and is listed on the Endangered Species List. The average size of the atlantic salmon is 8-12 pounds.
A landlocked Atlantic salmon is a freshwater form of the sea-run Atlantic salmon. They are genetically considered a subspecies of the sea-run Atlantic salmon. They reside in lakes, never making the marine migration. They generally do not grow as large
as sea-run fish, averaging between 12 and 20 inches long.</li>
</p>
<img src="https://media.fisheries.noaa.gov/styles/original/s3/dam-migration/640x427-chinook-salmon.png?null&itok=s7wokwso" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Chinook Salmon -</b> This animal is the state fish of Alaska and is also known as the king salmon. It is the largest of the salmon species and can get up to 125 pounds. Chinook salmon can live a maximum of 7 years. Chinooks can be found in Alaska
(mainly) and down the West coast. The average size of a Chinook is 10-15 pounds. Chinook salmon are anadromous—they hatch in freshwater streams and rivers then migrate out to the saltwater environment of the ocean to feed and grow. Chinook salmon
are the largest of the Pacific salmon, hence the name “king salmon.”</li>
</p>
<img src="http://www.kingsailfishmounts.com/images/categories_images/image1_271.jpg" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Chum Salmon -</b> This fish is found in Alaska down to the Northwest tip of the United States. It occupies the broadest range of any other salmon. The average size of a chum is 10-15 pounds. Chum salmon is one of the largest species of Pacific salmon,
second only to Chinook salmon in size. When in the ocean, chum salmon are metallic greenish-blue along the back with black speckles, similar to both sockeye and coho salmon. As they enter fresh water, their appearance changes dramatically.</li>
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Oncorhynchus_keta.jpeg/220px-Oncorhynchus_keta.jpeg" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Coho Salmon -</b> The Coho salmon, also known as "silvers," is one of the most sought after species and can be found in Alaska and down the West coast. The average size of a coho is 6-12 pounds. Coho salmon are anadromous fish: they are born in freshwater,
migrate to the sea in adulthood and return to freshwater to breed. Coho fry (recently hatched fish) feed primarily on insects, zooplankton and small fish. When they reach the ocean, they add small crustaceans to their diet.</li>
<p></p>
<img src="https://media.fisheries.noaa.gov/styles/original/s3/dam-migration/640x427-pink-salmon.png?null&itok=WBIjRwIO" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto2">
<li> <b>Pink Salmon -</b> Also known as "humpies," the pink salmon is the most abundant, yet smallest in size of the species. The average size of a pink salmon is 3-5 pounds. Pink salmon are the smallest of the Pacific salmon found in North America, weighing
between 3.5 and 5 pounds, with an average length of 20 to 25 inches. Pink salmon can be distinguished from other Pacific salmon by the large dark oval spots on their back and entire tail fin as well as their general coloring and form.</li>
<p></p>
<img src="https://wiki.fishingplanet.com/images/f/f8/Sockeye_Salmon.png" style="float: right; width: 195px; drop-shadow: 3px; height: 100px; margin-right: 1.5%; margin-bottom: 0.5em;" id="salmonphoto3">
<li> <b>Sockeye Salmon -</b> Also known as "reds," this is the most colorful (and the most common) of the species and can survive being in lakes and other freshwater. They sometimes even spawn in rivers and lakes. The average size of a sockeye is 5-8 pounds.
The striking orange color of sockeye salmon flesh comes from eating plankton and krill while in the ocean. Landlocked sockeye salmon rarely grow to more than 14 inches in length and are called “kokanee”. Sockeye salmon are the most economically important
species of salmon in Alaska.</li>
<p></p>
<hr> </hr>
<p>
<li>Feeding habits depend on a variety of different factors such as weather, season, and time of day.</p>
</li>
<p>
<li>Find the correct fishing reel that you feel most comfortable using.</p>
</li>
<p>
<li>Use brightly colored lures and add bait and scent to them.</p>
</li>
<p>
<li>Fish for salmon early in the morning or late at night.</p>
</li>
<p>
<li>Salmon tend to stay at the bottom, so use weights.</p>
</li>
<p>
<li>Each state has varying fishing regulations. It is important to educate yourself on them before going out to fish.</p>
</li>
<p>
<li>Remember to acquire a fishing permit if taking up this sport. Fishing without a permit is illegal and could result in a fine.</p>
</li>
<p>
<li>Look at the state's regulations and seasons to find out when you are allowed to fish.</p>
</li>
<p>
<li>Most states have a length limit for their fish. If the fish you caught does not measure the minimum, it is required that you let it go. There are sometimes maximum limits for certain fish as well.</p>
</li>
<p>
<li>Most states also have daily limits, or the amount of a certain fish you can keep in one day.</li>
</p>
</ul>
<cite> https://forum.americanexpedition.us/salmon-information-facts-and-photos </cite>
<cite> https://www.fisheries.noaa.gov/ </cite>
Upvotes: 2