Null Null - 24 days ago 8
CSS Question

Linear gradient won't show after centering verticaly and horizontaly

Background gradient isn't working when I centered the page horizontaly and verticaly. Here's the code:

HTML:

<h1>Lorem Ipsum</h1>


CSS:

body{
background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%);
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


JsFiddle

I tried that as well, but it's not working too, unless I add margin to body, which I don't want there.

Thanks.

Answer Source

Because your body is set to absolute its size is 0 for your html. Setting your html to 100% height will fix it.

html {
  height: 100%;
}

body{
  background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%);
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<h1>Lorem Ipsum</h1>