I've been trying for a while to get my CSS background that hasn't been working all of a sudden for some reason. I've tried following the solutions of other questions related to this one online but these solutions aren't working. I've also tried solving this by using HTML through the <body background="img.jpg"> tag but this still doesn't work.
Any help with getting my CSS background to show up would be greatly appreciated.
Here is the GitHub repository if you need to look at the file management and the code for the index HTML file and main CSS document are below.
I should also warn you that my code especially in CSS isn't that good. I apologise for that.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>typb.stream</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel='icon' href='images/favicon.ico' type='image/x-icon'/ >
</head>
<body>
<div class="text">
<center>
<h1 class="header">typb.stream is currently under development</h1>
<p class="paragraph">Stay tuned for something fantastic!</p>
</center>
</div>
<footer class="footer">
<p>© Copyright TheYellowPolarBear 2019-2020</p>
<div>
<ul>
<li>
<a href="https://www.youtube.com/theyellowpolarbear">
<img src="images/youtube.png" width="16" height="16">
</a>
</li>
<li>
<a href="https://www.twitter.com/samuel_typb">
<img src="images/twitter.png" width="16" height="16">
</a>
</li>
<li>
<a href="https://www.instagram.com/samuel_typb">
<img src="images/instagram.png" width="16" height="16">
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
* {
font-family: 'Open Sans', sans-serif;
color: white;
text-shadow: 0px 0px 10px rgba(0, 0, 0);
}
html, body {
padding: 0;
margin: 0;
}
html {
background-image: url(../images/indevbj.JPG);
background-color: rgba(0, 0, 0, .8);
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
}
div.text {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
.social img:hover {
background-color: rgba(255, 255, 255, .3)
}
.footer {
background-color: rgb(0, 0, 0, .5);
display: flex;
align-items: center;
margin: 0;
font-size: small;
position: absolute;
bottom: 0px;
width: 100%;
}
.footer p {
margin: 10px;
}
.footer li {
list-style-type: none;
float: right;
margin: 10px;
}
Again, any help would be greatly appreciated.
Aucun commentaire:
Enregistrer un commentaire