Make text appear above background in HTML + CSS
Question
Hi everyone this is my first webpage i've made and i'm trying to display a gif as backrgound and make text appear above that.. Everything works fine except i can't seem to display the text above the gif background.. As you can see in the source code i have one heading and three paragraphs, Anyone knows how to fix this?
<!DOCTYPE html> <html> <head> <link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/> <title>FirstWebpage</title> <style> body{ /* Will use a gif as background */ background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif'); background-position: relative; background-size: cover; } </style> <audio autoplay loop> <source src="seffelinie.mp3" type="audio/mp3"> </head> <body> <div align="center" id="text"> <h1>First Webpage</h1> <p>HTML</p> <p>+</p> <p>CSS</p> </div> </body> </html>
2 answers
solution1
0 ACCPTED 2017-09-11 19:59:40
The Audio tag was on top of the text I guess, replace with this:
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</audio>
solution2
0 2017-09-11 21:18:19
Your code is a little mixed up. As stated above, you're missing the closing audio tag, but you are also closing the <head> after the audio element which should be inside the <body> tags with the rest of your html code. Lastly, I cleaned up your background image CSS to use best practices based on what I think you're intending. background-position: relative; isn't an option. background-position is not the same as position , it is for telling the browser what aspects of the parent to position the image based on — like "top center" or "bottom left" . In your case since you want the image to always cover, I think you're best off centering the image vertically and horizontally in all situations, that's what background-position: center center` does.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="http://www.iconarchive.com/download/i91751/icons8/windows-8/Systems-Linux.ico" type="image/x-icon"/>
<title>FirstWebpage</title>
<style>
body{ /* Will use a gif as background */
background-image: url('http://images.eurogamer.net/2015/articles/1/8/7/1/5/3/2/san-francisco-subway-system-hacked-passengers-get-free-rides-148033947612.gif');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<audio autoplay loop>
<source src="seffelinie.mp3" type="audio/mp3">
</audio>
<div align="center" id="text">
<h1>First Webpage</h1>
<p>HTML</p>
<p>+</p>
<p>CSS</p>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.