Question posted in 
I’m very new to coding and have been just trying to code in my spare time. I have a code that when I go to view it has an obvious delay in the CSS. When you first load it for about a second the background will show as solid pink, the font changes, and the social media icons do not appear at the bottom of the screen. I have tried to search through here for answers, but the situations I’ve found that are similar to mine I didn’t quite understand the answers as I have only been coding for about 3 weeks now.
Below is my HTML code and my CSS code:
/* BODY */
body {
background-image: url('https://i.ibb.co/vPn6tqR/clouds.jpg');
}
.cover-body {
background-color: #ffd5cd;
font-family: 'Libre Baskerville', serif;
color: #8675a9;
position: relative;
text-align: center;
height: 100%;
}
.cover-btn {
font-size: 80%;
font-weight: bold;
color: #8675a9;
letter-spacing: 1.5px;
border-width: medium;
}
.cover-btn:hover {
color: #2e2933;
}
.cover-header {
font-family: 'Great Vibes', cursive;
font-size: 6rem;
}
.cover-p {
margin-top: 15%;
margin-left: 20%;
font-size: 1.5rem;
}
.pc-cover-logo {
height: 6rem;
width: 7rem;
position: absolute;
right: 63%;
bottom:84%;
}
/* FOOTER */
a {
color: #8675a9;
}
a:hover {
color: #c3aed6;
}
.footer {
font-size: 80%;
margin-top: 6%;
margin-bottom: 0;
}
.social-media-icons {
word-spacing: 1.5rem;
padding-bottom: 2rem;
}<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1">
<title>Palette Clouds</title>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Libre+Baskerville&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css" />
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/8346f7b19f.js" crossorigin="anonymous"></script>
</head>
<!-- BODY -->
<body class="cover-body">
<img alt="photo of clouds" class="pc-cover-logo" src="https://i.ibb.co/KrXCrp2/PC-Logo.png">
<p class="cover-p">welcome to</p>
<h1 class="cover-header">Palette Clouds</h1>
<button type="button" class="btn btn-outline-light cover-btn">coming soon</button>
<!-- FOOTER -->
<footer class="footer">
<div class="social-media-icons">
<a class="fab fa-twitter fa-2x" href="https://twitter.com/paletteclouds" target="_blank"></a>
<a class="fab fa-facebook-f fa-2x" href="https://www.facebook.com/PaletteClouds/" target="_blank"></a>
<a class="fab fa-instagram fa-2x" href="https://www.instagram.com/paletteclouds/" target="_blank"></a>
<a class="fas fa-envelope fa-2x" href="mailto:[email protected]"></a>
</div>
<p>© 2020 Palette Clouds</p>
</footer>
</body>
</html>Any help or suggestions would be much appreciated!!
2
Answers
How pages normally load is as follow:
So here your image is called later (the few secs delay that you wait between html render and css), so a hack I use would be having a hidden image tag with the background source so the image source used in the background image will be loaded in the html render therefore faster and causing no delay until css load.
Also please notice that one reason of the delay is the huge size of the image so reducing the image size will decrease the loading time as well.
Try adding an inline style like this:
It makes it just that little bit faster and seems to prevent the flicker.
Update your css too:
https://jsfiddle.net/e23udzk8/