Achtergrond body inkleuren over geheel scherm
Ik zit met een kleine "uitdaging":
Mijn opdrachtgever wil de achtergrond van zijn scherm middels een gradiënt ingekleurd hebben.
Niet al te moeilijk maar wel als het gaat om ALTIJD het gehele scherm te benutten met deze gradiënt, ongeacht de vulling op het scherm en de grootte van het scherm.
Met onderstaande code krijg ik de achtergrond alleen maar gevuld tot en met de onderste invulling van het scherm plus de eventuele marges.
Hoe krijg ik nu de code zodanig dat altijd het gehele scherm wordt voorzien van een gradiënt?
Mijn CSS-code:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
body {
margin: 0;
background: -webkit-linear-gradient(white, grey); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, grey); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, grey); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, grey); /* Standard syntax (must be last) */
}
margin: 0;
background: -webkit-linear-gradient(white, grey); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, grey); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, grey); /* For Firefox 3.6 to 15 */
background: linear-gradient(white, grey); /* Standard syntax (must be last) */
}
George
Wat je namelijk niet doet is de hoogte instellen voor de body. Die rekt namelijk op naarmate er content inzit.
Zodra je geen content hebt laat hij ook niets zien. Je geeft dus een minimale hoogte op van 100%, zo blijft hij 100% tenzij de content groter wordt.
Zie onderstaande afbeelding
Toevoeging op 27/10/2014 16:37:02:
opmerking: de print-screen is gemaakt op een apple-machine
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
html, body{
margin: 0;
min-height: 100%;
background: -moz-linear-gradient(top, white 0%, grey 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
background: -webkit-linear-gradient(top, white 0%,grey 100%);
background: -o-linear-gradient(top, white 0%,grey 100%);
background: -ms-linear-gradient(top, white 0%,grey 100%);
background: linear-gradient(to bottom, white 0%,grey 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='grey',GradientType=0 );
}
margin: 0;
min-height: 100%;
background: -moz-linear-gradient(top, white 0%, grey 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
background: -webkit-linear-gradient(top, white 0%,grey 100%);
background: -o-linear-gradient(top, white 0%,grey 100%);
background: -ms-linear-gradient(top, white 0%,grey 100%);
background: linear-gradient(to bottom, white 0%,grey 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='grey',GradientType=0 );
}
Vervangt door dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
html{
margin: 0;
min-height: 100%;
background: -moz-linear-gradient(top, white 0%, grey 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
background: -webkit-linear-gradient(top, white 0%,grey 100%);
background: -o-linear-gradient(top, white 0%,grey 100%);
background: -ms-linear-gradient(top, white 0%,grey 100%);
background: linear-gradient(to bottom, white 0%,grey 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='grey',GradientType=0 );
}
margin: 0;
min-height: 100%;
background: -moz-linear-gradient(top, white 0%, grey 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
background: -webkit-linear-gradient(top, white 0%,grey 100%);
background: -o-linear-gradient(top, white 0%,grey 100%);
background: -ms-linear-gradient(top, white 0%,grey 100%);
background: linear-gradient(to bottom, white 0%,grey 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='grey',GradientType=0 );
}
Gewijzigd op 27/10/2014 16:39:19 door Daan Slagter
Bedankt allemaal.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
html {
margin: 0;
height: 100%;
background: -moz-linear-gradient(top, white 0%, grey 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
background: -webkit-linear-gradient(top, white 0%,grey 100%);
background: -o-linear-gradient(top, white 0%,grey 100%);
background: -ms-linear-gradient(top, white 0%,grey 100%);
background: linear-gradient(to bottom, white 0%,grey 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='grey',GradientType=0 );
}
margin: 0;
height: 100%;
background: -moz-linear-gradient(top, white 0%, grey 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,grey));
background: -webkit-linear-gradient(top, white 0%,grey 100%);
background: -o-linear-gradient(top, white 0%,grey 100%);
background: -ms-linear-gradient(top, white 0%,grey 100%);
background: linear-gradient(to bottom, white 0%,grey 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='grey',GradientType=0 );
}
George
Gewijzigd op 28/10/2014 13:24:57 door George van Baasbank