I have the following background color but I have to scale between the body
-> <div class="background">
and <div class="container">
to get this result:
@import 'https://fonts.googleapis.com/css?family=Lato:300';
html, body, .background
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
background: white;
}
body
{
background: linear-gradient(0deg, rgba(0, 0, 200, 0.6) , rgba(0, 0, 200, 0) );
}
.background
{
background: linear-gradient(120deg, rgba(50, 150, 100, 0.6) , rgba(0, 0, 100, 0) );
}
.container
{
background: linear-gradient(240deg, rgba(150, 50, 50, 0.6) , rgba(0, 0, 200, 0) );
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
h1
{
color: white;
font-weight: 100;
}
<div class="background">
<div class="container">
<h1>hello</h1>
</div>
</div>
How can I get that same background color in a single style, that is, have that background in a single container, in one container div
or another without having to add other elements to obtain the same result.
I think you are looking for something like this:
I hope I have supported you. Greetings.