Skip to content Skip to sidebar Skip to footer
Home / Css / Html

50% Height Centered Background-image And The Remaining Space A Background-color

Post a Comment
I want to have a background where the top 50% of the users heights size, is a background-image there is centered so it fits 100% width and 50% height. The remaining 50% or more (If

Solution 1:

There are many ways to do this, but considering your approach here, this is the easiest one:

body {
  width: 100%;
  height: 100%;
  background-color: #e1e1e1;
}

#wrapper {
  width: 100%;
  background: url('http://wallpaper-gallery.net/images/wallpaper-black-and-white/wallpaper-black-and-white-7.jpg') no-repeat center 240%, #858585;
  padding-top: 2rem;
}

#content {
  width: 60%;
  height: 700px;
  margin: 0 auto;
  background-color: white;
}
<body><divid="wrapper"><divid="content"><p>
        Lorem Ipsum Dolar
      </p></div></div></body>

Once more, this is made to fit your approach, there are a few other ways you can tackle this.

All properties are just made-up so they can fit your aim. You can see for example a 250% Y offset for the background-image. You will have to create an image that fits nicely at the top of the backdrop in this case, so you won't need a negative offset.

Solution 2:

here is the updated code. i just updated your css 

html{
  height: 100%;
}
body{
  width: 100%;
  height: 100%;
  background-color: #e1e1e1;
}
#wrapper{
  width: 100%;
  height: 50%;
  background: green url('http://wallpaper-gallery.net/images/wallpaper-black-and-white/wallpaper-black-and-white-7.jpg') no-repeat center center fixed;
  -webkit-background-size: 100%40%;
  -moz-background-size: 100%40%;
  -o-background-size: 100%40%;
  background-size: 100%40%;
  background-position: top center;
}
#content{
  width: 200px;
  margin: 0 auto;
  background-color:white;
}
<body><divid="wrapper"><divid="content"><p>
        Lorem Ipsum Dolar
     </p></div></div></body>

Post a Comment for "50% Height Centered Background-image And The Remaining Space A Background-color"