CODEWITHSUNDEEP
htmlcssbackgroundgradient
ItsKasper
ItsKasper

Reputation: 35

Background color on body, with an div on top of it

My body uses a color gradient, but on top of it, I want to have a wrapper around the whole web page (because of vertical/horizontal align). However, because of this div, the background can't be seen anymore. I tried to solve this problem by using RGBA and Opacity, but neither of them worked.

Link to JSFiddle: https://jsfiddle.net/ItsKasper_/cnpczafL/ Code: 

<div id='wrapper'>
<div id='list'>
    <p>test</p>
</div>
</div>

CSS: Couldn't get the CSS to correctly show.

Thanks in advance

Upvotes: 1

Views: 566

Answers (1)

Asons
Asons

Reputation: 87231

The body sizes with content and as the wrapper, the only direct child, is positioned absolute, its height becomes 0, but the html is the full viewport

Fiddle

html {
    background: #457fca; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #457fca, #5691c8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #457fca, #5691c8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #457fca, #5691c8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #457fca, #5691c8); /* Standard syntax */
    margin: 0;
}

If you give the body a height, height: 100vh;, it would work as well

Fiddle

body {
    height: 100vh;
    background: #457fca; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #457fca, #5691c8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #457fca, #5691c8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #457fca, #5691c8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #457fca, #5691c8); /* Standard syntax */
    margin: 0;
}

And since the wrapper has the size of the viewport, you could of course set the background on it

Fiddle

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background: #457fca; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #457fca, #5691c8); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #457fca, #5691c8); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #457fca, #5691c8); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #457fca, #5691c8); /* Standard syntax */
}

Upvotes: 2

Related Questions