CODEWITHSUNDEEP
htmlcss
Will Hua
Will Hua

Reputation: 1748

CSS: Background color to extend to a certain element

I have the following code

<body>
    <div style="height: 35%; background-color: black;"></div>
    <div id="header"> 
        <div> 
            <h1>Title</h1>
            <h3>Subtitle</h3> 
        </div> 
    </div>
    <div id="content" class="card">
        <div> 
            <p> 
                One 
            </p> 
            <p> 
                Two 
            </p> 
        </div>
    </div>
</body>

Ideally, I would like the top portion of the page to be a certain color (black in the example), and I want the header area (which contains the <h1> and <h3> elements) to be inside the black box. Then I would like the first paragraph of the content to also be included inside the black box. Very similar to this picture: enter image description here

What is the best way to go about this?

Upvotes: 0

Views: 1334

Answers (3)

Asons
Asons

Reputation: 87191

The simplest way is to use an absolute positioned pseudo element on the header

Stack snippet

body {
  background-color: #ddd;
  margin: 0;
}

#header {
  position: relative;
  color: white;
  background-color: black;
}
#header::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  height: 60px;
  width: 100%;  
  background-color: inherit;
}

#header div {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
}

#content {
  position: relative;
  width: 80%;
  margin: 0 auto;
  background-color: white;
}
<div id="header"> 
    <div> 
        <h1>Title</h1>
        <h3>Subtitle</h3> 
    </div>
</div>
<div id="content" class="card">
    <div> 
        <p> 
            One 
        </p> 
        <p> 
            Two 
        </p> 
        <p> 
            Thre 
        </p> 
        <p> 
            Fou
        </p> 
    </div>
</div>

Upvotes: 1

seahorsepip
seahorsepip

Reputation: 4819

Make sure that the html and body have height: 100% or min-height: 100% otherwise height 35% is not going to be 35% of the viewport height.

You can make the black background with an absolute positioned element. I suggest to look into css position(relative, absolute, fixed, static).

Here's a demo and the code:

https://jsfiddle.net/n617L6rh/

<div id="bg"></div>
<div id="header"> 
    <div> 
        <h1>Title</h1>
        <h3>Subtitle</h3> 
    </div> 
</div>
<div id="content" class="card">
    <div> 
        <p>One</p> 
        <p>Two</p> 
    </div>
</div>

 

html,
body {
    height: 100%;
}
#bg {
    height: 35%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
#header {
    height: 35%;
    color: #fff;
    position: relative;
}

Upvotes: 0

Rounin
Rounin

Reputation: 29463

Three steps:

  1. Apply a gradient background to the <body>.
  2. Create two sectioning elements: <header> and <section>
  3. Ensure all the relevant elements in <header> and at the top of <section> have an explicitly declared height in pixels which, combined, match the height of the first part of the gradient.

Upvotes: 0

Related Questions