Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

background gradient op 50% van de pagina laten beginnen

8 antwoorden
  • Ik heb een afbeelding van 1px breed en .. px hoog met hierin een gradient. Nu wil ik mijn scherm graag in 2 delen verdelen waarbij de gradient halverwege het scherm begint en dus het onderste deel van het scherm vult. Is dit mogelijk met de background-tag in CSS ? background: #fff url(gradient.jpg) {vanaf 50%} repeat-x; Ik heb dit wel voor elkaar gekregen door een aparte div absoluut te positioneren onderin het scherm met een hoogte van 50% en een breedte van 100%. Hierbij heb ik alleen het probleem dat wanneer de 'daadwerkelijke' pagina (lees div) groter wordt dan het browserscherm en er gescrolled moet worden, de div met gradient zich niet aanpast aan het browserscherm en er een wit vlak onstaat. [img:4160484346]http://www.a-designz.nl/STV-Advocaten/demo/voorbeeld.jpg[/img:4160484346] Dit probleem wilde ik oplossen door alleen de background-tag in de body te gebruiken alleen weet ik niet of het mogelijk is om deze op 50% van de pagina te laten beginnen. Mochten er andere tips zijn, dan zijn deze uiteraard ook van harte welkom! Alvast bedankt! Marcel
  • [url=http://www.google.com/search?q=css+background+image+position&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:nl:official&client=firefox-a]Google is je vriend.[/url] ;) - Bas
  • 4:58 am... is dat laat of vroeg ;) Ben deze antwoorden eigenlijk niet van je gewend... Natuurlijk is google mijn vriend, maar niet genoeg blijkbaar want het antwoord op mijn vraag heb ik niet kunnen vinden. Anders zou ik hem hier niet stellen ;) Bedankt voor je reactie, ik vermoed dat mijn background idee niet gaat werken (na nog meer zoeken) maar misschien heb je een andere oplossing voor mij? Het idee is het scherm horizontaal in tweeen splitsen waarbij het onderste deel een gradient moet worden. Gecentreerd in het midden moet een box komen waar de rest van de website in gebouwd wordt. Ik ga ondertussen google nog een keer raadplegen ;) Grz Marcel
  • Het was laat... :roll: Ennuh, het is niet zomaar een link naar Google. ;) De bovenste link wijst naar een pagina met beschrijvingen van CSS-eigenschappen. In jouw geval zul je [i:5864c1cecb]background-position: center left; [/i:5864c1cecb] nodig hebben en vervolgens [i:5864c1cecb]background-repeat: repeat-x;[/i:5864c1cecb] en dan zou het moeten werken. Als dat niet het gewenste resultaat geeft heb ik vermoedelijk je vraagstelling verkeerd begrepen. - Bas
  • Hey Bas, [code:1:573f4aeede]background: #fff url(images/gradient_red.gif) center left repeat-x fixed;[/code:1:573f4aeede]Wat er dan gebeurd is dat de gradient gecentreerd wordt weergegeven, de bedoeling is dat de afbeelding begint halverwege het scherm en deze tot onderaan vult. Ik vermoed dat dit niet met background-position mogelijk is maar weet geen andere manier om het op te lossen. =================== Ik heb het inmiddels wel anders voor elkaar alleen blijf ik het probleem houden in mozilla dat wanneer het browser-scherm kleiner is dan de daarwerkelijke website de witte balk boven niet 'meegroeit' met de browser tijdens het horizontaal scrollen. 1. zie voorbeeld afbeelding hierboven 2. zie website voorbeeld: [url=http://www.a-designz.nl/STV-Advocaten/demo/]demo[/url] dit is alleen in mozilla het geval
  • Ik begrijp het probleem nu. Je zou eens kunnen kijken naar [url=http://www.sitepoint.com/blogs/2007/07/05/css-using-percentages-in-background-image/]dit artikel op SitePoint[/url], hoewel er niet een kant en klare oplossing voor je staat geeft het misschien wel meer inzicht in de werking van CSS-positionering mbv percentages. Ik heb een briefje naast mijn computer gelegd waarop ik jouw probleem probeer op te lossen. Als ik met iets productiefs kom zal ik het zeker plaatsen. ;) - Bas
  • Goed artikel, laat duidelijk zien dat wat ik wil niet gaat :) Dus mocht je ineens heel creatief worden dan hoor ik het graag van je :P Grz Marcel
  • Ik had bij het lezen van de eerste post al een donkerbruin vermoeden dat ik het niet 1-2-3 zou oplossen en was er dus ook totaal niet begonnen met erover nadenken; wellicht dat Bas er nog wat mee zou kunnen. Maar dat valt me nou tegen van je :wink:

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.