Achtergrond body inkleuren over geheel scherm

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

27/10/2014 09:48:26
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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) */
}


George
 
PHP hulp

PHP hulp

26/11/2020 20:10:25
 

27/10/2014 10:41:51
Quote Anchor link
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

George van Baasbank

27/10/2014 11:45:33
Quote Anchor link
Het gaat al wat beter maar het resultaat is (nog) niet goed
Zie onderstaande afbeelding

http://functie.vanbaasbank.nl/achtergrond.jpg
 

27/10/2014 11:48:02
Quote Anchor link
Kunnen we een link krijgen zodat we de DOM kunnen manipuleren ipv een plaatje?
 
Mees kluivers

mees kluivers

27/10/2014 13:39:20
Quote Anchor link
Zou je de hele CSS en de bijbehorende HTML kunnen plaatsen?
 
George van Baasbank

George van Baasbank

27/10/2014 16:34:47
Quote Anchor link
De link: http://www.cco-harderwijk.nl/v2

Toevoeging op 27/10/2014 16:37:02:

opmerking: de print-screen is gemaakt op een apple-machine
 
Daan Slagter

Daan Slagter

27/10/2014 16:39:01
Quote Anchor link
Als je dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 );
}


Vervangt door dit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 );
}
Gewijzigd op 27/10/2014 16:39:19 door Daan Slagter
 

27/10/2014 16:48:00
Quote Anchor link
Verander de min-height op je body naar height
 
George van Baasbank

George van Baasbank

28/10/2014 11:58:18
Quote Anchor link
Met de onderstaande code is het nu gelukt.
Bedankt allemaal.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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 );
}


George
Gewijzigd op 28/10/2014 13:24:57 door George van Baasbank
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.