CODEWITHSUNDEEP
htmlcss
ProfHase85
ProfHase85

Reputation: 12233

Stretch background image to page

I am trying to stretch the body background gradient to the whole page, independantly to how much content there is.

if I use the following css leads to a white page in case of longer content: http://jsfiddle.net/AE6dr/1/ 

html{
    height: 100%;
}
body {
    height: 100%;
    background-image: linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -moz-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -webkit-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -ms-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-repeat: no-repeat;
}

On the other hand unsetting the html height leads to a good result for large content: http://jsfiddle.net/L6qM8/

But does not stretch the background for small content: http://jsfiddle.net/6vaTX/1/

How would I get a linear gradient background independently from content?

* EDIT: SUMMARY *

1: http://jsfiddle.net/AE6dr/1/ --> scroll down and there won't be any background 2: http://jsfiddle.net/6vaTX/1/ --> background does not stretch to bottom 3: background-size: cover; does not help

Upvotes: 0

Views: 95

Answers (4)

what is sleep
what is sleep

Reputation: 905

try:

html
{
   min-height:100%;
}

the html element wasn't taking up the whole height of the iframe.

Upvotes: 0

fiskolin
fiskolin

Reputation: 1421

Try this.

CSS:

body {
    background-image: linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -moz-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -webkit-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -ms-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
}

Upvotes: 0

DrCord
DrCord

Reputation: 3955

A combination of the background-size: cover and applying the css to the html instead of the body element and removing height 100% worked for me. I referenced this article: http://css-tricks.com/perfect-full-page-background-image/

http://jsfiddle.net/AE6dr/8/

html {
    background-image: linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -moz-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -webkit-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-image: -ms-linear-gradient(top, rgb(78, 75, 78) 42%, rgb(66, 45, 46) 71%, rgb(71, 51, 50) 86%);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size:cover;
}

Upvotes: 1

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you

background-size:cover; //or 100%;
background-attachment: fixed;

Demo

Upvotes: 3

Related Questions