Help in css , background prop

hey there !
is it possible to set the background as shown in the image.
I really need to use it without css: url()(i.e image)
also in a single div ,is it possible using gradient etc…

in html file

<div id="main"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div>

IN CSS FILE

#main{
height:80vh;
width:100%;

}
.child{
height:40vh;
width:50%;
float:left;

}
.child:nth-child(1){
background-color:red;
border:2px solid green;
}
.child:nth-child(2){
background-color:yellow;
border:2px solid green;
}
.child:nth-child(3){
background-color:green;
border:2px solid black;
}
.child:nth-child(4){
background-color:brown;
border:2px solid green;
}

Thank you ,but this is not im looking for as i cannot include child elements

try append,perpend,after,before to create that classes

1 Like