How to get social media icons on a background image? - html

Question

I am creating a website for a school project. I currently have it up and working but need help with my social media icons to stay on the back ground image. I am using css to size them but I think I am missing something. If someone could please guide me towards the correct code. Thanks
This my code for the social media button
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-instagram {
background: #125688;
color: white;
}
when I scroll to the end of the page the its white with the social media icons displaying.
Sorry left the html off here is the html
</form>
</div>
</div>
<div style="padding-bottom:16px">
<div Class="module mid">
<h2>Welcome to Uniforms Today.</h2>
<div class="module h1">
<h1>The website that helps parents and kids get their school
uniforms.</h1>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com
/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</body>
</html>

Answer 1

You can use 2 background attribute on 1 class but as I researched it is a little tricky.
Instead of using 1 colour attribute, you need to use a gradient colour attribute like this following code:
.fa-facebook {
background-image: url('[facebook-icon-link]'), linear-gradient(to right, #3B5998, #3B5998);
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size:contain,contain;
}
You can follow the guideline from this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds