PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Achtergrond body inkleuren over geheel scherm

Door George van Baasbank op 27-10-2014 09:48
1.500 views
Goedemorgen allemaal,

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:


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) */
}


George
?
Onbekende gebruiker
27-10-2014 10:41
Check de Fiddle

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.
George van Baasbank
27-10-2014 11:45
Het gaat al wat beter maar het resultaat is (nog) niet goed
Zie onderstaande afbeelding

?
Onbekende gebruiker
27-10-2014 11:48
Kunnen we een link krijgen zodat we de DOM kunnen manipuleren ipv een plaatje?
m
mees kluivers
27-10-2014 13:39
Zou je de hele CSS en de bijbehorende HTML kunnen plaatsen?
Daan Slagter
27-10-2014 16:39 gewijzigd op 27-10-2014 16:39
Als je dit:

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 );
}


Vervangt door dit:

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 );
}
?
Onbekende gebruiker
27-10-2014 16:48
Verander de min-height op je body naar height
George van Baasbank
28-10-2014 11:58 gewijzigd op 28-10-2014 13:24
Met de onderstaande code is het nu gelukt.
Bedankt allemaal.


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 );
}


George

Reageren

Inloggen om te reageren