#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.

CodePudding user response：

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>

CodePudding user response：

I think you want the following outcome:

 #page {
 display:flex;
     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%;
 margin-top: 210px;
 position:relative;
}
 #header {
     background-color: #FFF !important;
     height: 200px;
     width:50%;
     margin: 0 auto;
     margin-top:-200px;
}

<div id="page">
  <div id="header">
  <p>Start the blue patterned area under this header block</p>
  </div>
</div>

Used just margin and position properties.