CODEWITHSUNDEEP
htmlcss
Al Arefin
Al Arefin

Reputation: 75

how to have a background of a container inside header from start to the end of full width of a page?

Here I am trying to extend the background of the title from first to the end of the full width of the page. The title is inside a div container. I need to get the result like shown in the image. Here's my code.Title with half height background from start to the end

.whoweare h1{
    text-transform: uppercase;
    color: #EE4036;
    font-size: 4.5em;
    font-weight: bold;
    margin: 80px auto;
    background: #FCE1D8;
  }
<section class="whoweare" style="margin-top: 50px;">
    <div class="container" style="text-align: center;">
      <h1>WHO WE ARE</h1>
    </div>
</section>

Upvotes: 1

Views: 86

Answers (1)

CssProblem
CssProblem

Reputation: 275

Ok, here is how to get the skewed background

.whoweare h1{
  display: inline;
    text-transform: uppercase;
    color: #EE4036;
    font-size: 4.5em;
    font-weight: bold;
    margin: 80px auto;
    position: relative;
  }

.whoweare h1::after{
  content: "";
  background: pink;
  position: absolute;
  top: 50%;
  left: -100px;
  width: calc(100% + 400px);
  height: 50%;
  z-index: -1;
  transform: skew(45deg);
}
<section class="whoweare" style="margin-top: 50px;">
    <div class="container" style="text-align: center;">
      <h1>WHO WE ARE</h1>
    </div>
</section>

Upvotes: 2

Related Questions