I've been looking for some answers to solve that issue I've found while developing a webpage. I'm trying to create a overlay gradient background like these examples I found on the web:
My code currently looks like this:
.image-bg{
width: 100%;
height: 100%;
margin: 0px;
background: url('../images/background.jpg') center center no-repeat;
background-size: cover;
background-attachment: fixed;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #e2dce1, #e8d5e4);
opacity: .8;
}
}
<body class="image-bg">
<div class="container" id="main">
<div class="logo">
<h1>Background Overlay Image</h1>
</div> <!-- ./ logo -->
</div> <!-- ./Container -->
Any ideas of how to change that code to something similar to the themes I've mentioned above?
Thanks in advance!
Aucun commentaire:
Enregistrer un commentaire