#page {
background-image: linear-gradient(rgba(74, 131, 167, .20) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 131, 167, .20) 1px, transparent 1px);
background-size: 10px 10px, 10px 20px, 20px 20px, 20px 20px;
height:800px;
width: 100%;
}
#header {
background-color: #FFF !important;
height: 200px;
width:50%;
margin: 0 auto;
}
<div id="page">
<div id="header">
<p>Start the blue patterned area under this header block</p>
</div>
</div>How can I make the blue patterned area start under this header block? Only with changing the css? I cannot edit the HTML template.
>Solution :
Use a pseudo element and you can also simplify your pattern using one gradient:
#page {
height: 800px;
position: relative;
z-index: 0;
}
#page:before {
content: "";
position: absolute;
z-index: -1;
inset: 200px 0 0 0; /* the height of the header here */
background: conic-gradient(from 90deg at 1px 1px, #0000 90deg, rgba(74, 131, 167, .20) 0) 0 0/10px 10px;
}
#header {
background-color: #FFF;
height: 200px;
width: 50%;
margin: 0 auto;
}<div id="page">
<div id="header">
<p>Start the blue patterned area under this header block</p>
</div>
</div>