CODEWITHSUNDEEP
htmlcss
Karl
Karl

Reputation: 1769

How to place a half filled background for a div

I saw this UI design and its really beautiful. I would love to use this design in my web app.

enter image description here

I have a fixed header and a fixed footer. In the middle, there are the main content, with 95% of screen width.

demo: codepen.io

<header>
  <div id="header_wrapper">
    <nav>
      <a href="#"> <i class="fa fa-bars" aria-hidden="true"> </i> </a>
    </nav>
  </div>
</header>

<div id="main_content">
  <div id="profile_wrapper">
    <div id="profile_image" style="background-image:url(http://s3.amazonaws.com/37assets/svn/765-default-avatar.png)"></div>
    <div id="profile_username">Usernamae</div>
  </div>
  <div id="some_content">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae suscipit quaerat dolore assumenda voluptate. Molestias accusamus fugiat quam illo impedit aliquid eligendi assumenda molestiae, quis, ratione, fugit dicta dolore praesentium.</p>
    </div>
</div>

What I don't get is, how can I have a background which will have 50% height of the profile-image for that profile-image div, and have 100% width of the screen, since my main-content has 95% of screen width?

Upvotes: 1

Views: 1725

Answers (1)

Andrew Myers
Andrew Myers

Reputation: 2786

A method (by no means the only one) would be to add an ::after pseudo-element on the parent, which adds another background. For example:

#profile_wrapper {
  position: relative;
}

#profile_wrapper:after {
  content: "";

  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  right: 0;

  background: white;
  z-index: 0;
}

That pseudo-element will apply a white color to the lower half of the parent. Note that the other children, such as the profile image itself, must be given a positive z-index to stay on top.

For what it's worth, pseudo-elements have slightly wider support than multiple background images, as long as you use single-colon syntax (:after). Basically, it's just IE8. And if you're having to worry about IE8...

Here is a version of this applied to your pen.

Upvotes: 1

Related Questions