One More Thing » Community » Forum » Pro » Web ontwikkeling » Achtergrond in css

Achtergrond in css

TheBT

TheBT op 08 april 2004 #

Ik ben een site aan het maken waarbij de achtergrond van licht naar donker kleurt.
Dus lichte kleur bovenaan en na een 600 pixels komt de donkerste kleur.
Indien de hoogte meer dan 600 pixels is blijft het daaronder ook donker van kleur.
Hoe kan ik dit specifieren in de html en css opmaak?

Want als ik de bvb devolgende code gebruik dan krijg ik enkel de overgang (backgrad.jpg) te zien:

 

body {
    background: url(images/backg.jpg);
    background-attachment: fixed;
    background-image: url(images/backgrad.jpg);
    background-repeat: repeat-x;
}
[/code:1:f70919c08e]

Andere oplossingen die ik misschien over het hoofd zie?? :?

Flipstra

Flipstra op 08 april 2004 #

maak een strook van een paar pixels breed en 600 px hoog. Laat die over x herhalen en geef de achtergrond kleur de kleur van het onderste deel van de strook.

Je geeft twee keer je achtergrond plaatje op. Hij pakt dan de laatste.

Martens

Martens op 08 april 2004 #

 

body {
background : #000000 url("images/backg.jpg") top repeat-x;
}[/code:1:fd6e46b14f]

En even "#000000" vervangen in je donkere kleur ;]

TheBT

TheBT op 08 april 2004 #

Ja ok, maar probleem is dat het eigenlijk niet gewoon kleuren zijn, er zit wel een kleine tekening – relief in.
Kan dus geen gewone achtergrondkleur gebruiken.

Flipstra

Flipstra op 08 april 2004 #

laat eens zien dan?

macetaria

macetaria op 08 april 2004 #

dan zul je de onderste kleur (tekening) in achtergrond moeten zetten, en voor het bovenste gedeelte een layer gebruiken (100% breedte, hoogte=vast, positie 0,0 – fixed -> staat dus UIT de normale ‘flow’ van alle andere elementen) en daar je verlooptekening als achtergrond.

Laiste

Laiste op 08 april 2004 #

Ja, ben nu ook wel benieuwd…. heb zelf ook wel eens dat probleem dat ik eigenlijk twee achtergrondbestanden wil gebruiken in een pagina.

Overigens, nu we het er toch over hebben: waarom pakken %#$(#$** Internet Exploders op een *hoestkuch*PC*rochel* geen PNG bestanden met transparantie? Echt heel vervelend!!! Op de mac doet dat het natuurlijk wel gewoon netjes, in Safari, zelfs in IE… soms wordt ik er zoooo moe van!  :(

Syndic

Syndic op 09 april 2004 #

"Anubiz"

Overigens, nu we het er toch over hebben: waarom pakken %#$(#$** Internet Exploders op een *hoestkuch*PC*rochel* geen PNG bestanden met transparantie? Echt heel vervelend!!! Op de mac doet dat het natuurlijk wel gewoon netjes, in Safari, zelfs in IE… soms wordt ik er zoooo moe van!  :(

Misschien heb je hier iets aan?

Laiste

Laiste op 09 april 2004 #

Jeetje, ontzettend bedankt zeg!!! Je maakt me weer helemaal gelukkig, meteeeeen gedownload en ik ga hem zo gelijk proberen! :)

tennapel

tennapel op 09 april 2004 #

"TheBT"

Ik ben een site aan het maken waarbij de achtergrond van licht naar donker kleurt.
Dus lichte kleur bovenaan en na een 600 pixels komt de donkerste kleur.
Indien de hoogte meer dan 600 pixels is blijft het daaronder ook donker van kleur.
Hoe kan ik dit specifieren in de html en css opmaak?

Maak een image die bijv. 1000 pixels hoog is. Specificeer het kleurverloop in de bovenste helft van de image en maak de onderste helft van de image zoals je dat verder wiklt, inclusief patroontje.

Snij de image bij, zodat deze 1000px hoog en 5px breed is. Dan wordt je CSS heel simpel:

 

body {
 background : url(achtergrond.jpg) repeat-x 0 0;
 }[/code:1:48df346ad5]

TheBT

TheBT op 09 april 2004 #

"tennapel"

Maak een image die bijv. 1000 pixels hoog is. Specificeer het kleurverloop in de bovenste helft van de image en maak de onderste helft van de image zoals je dat verder wiklt, inclusief patroontje.

Snij de image bij, zodat deze 1000px hoog en 5px breed is. Dan wordt je CSS heel simpel:

 

body {
 background : url(achtergrond.jpg) repeat-x 0 0;
 }[/code:1:d6e5e41526]

Ja dit heb ik dus uiteindelijk gedaan... Een image gemaakt van 300px breed op 1300px hoog en dan in lage jpg compressie gezet zodat het toch niet te groot werd (is nu 15kB).
Die breedte van 300px heb ik nodig omdat mijn pattern zo breed is en die hoogte van 1300px heb ik toch genomen vermits er toch al schermen beginnen komen van meer dan 1000px hoog hé!  :wink:  

Thanks voor de hulp en nu gaan we verder doen en testen in css, vind het wel plezant!  :mrgreen:

Over dit topic

Gestart op 08 april 2004 door TheBT

Laatste reactie door TheBT

Je kunt alleen reageren met een gratis OMT account.
Log in.

Inloggen