Archief - Gradient op achtergrond.

Dag iedereen,

Ik ben momenteel bezig met een ontwerp voor een website voor een schoenenwinkel. Bij het omzetten naar HTML & CSS stuit ik, zoals gewoonlijk bij mij, op een probleem dat ik niet onmiddellijk kan oplossen. Het is dan ook al een tijdje geleden dat ik echt codeerwerk heb moeten verrichten en ben dan ook totaal niet mee met CSS3.

Op het internet kan je tal van websites vinden die een radial gradient of dergelijke gebruiken om wat diepte te creeëren. Nu, dit wil ik ook doen en heb het al enkele keren geprobeerd maar ik bereik nooit het gewenste resultaat.

Even concreet. Ik heb dus een achtergrond met een pattern dat de volledige webpagina beslaat. Als je de pagina uitrekt of kleiner maakt vult alles zich mooi op. Echter heb ik achter de header een radial gradient met blending mode "overlay" die de achtergrond met pattern deels verlicht. Enkel rond de header, maar toch wel een groot deel. De simpelste oplossing is natuurlijk om van het deel die de gradient beslaat één grote afbeelding te maken, maar dan komt het andere deel van de achtergrond niet netjes uit met het deel rond de header en vice versa. Als je de website dan verder uitrekt krijg je hier en daar nog eens een half stuk pattern die vanachter de grote afbeelding tevoorschijn komt, je snapt het wel.

Hoe kan ik dit het best oplossen?

probleem dat en pattern dat vanachter ... (just so you know )

Het is nog niet volledig duidelijk wat je wilt. Afbeelding/voorbeeld/test case?

Een transparante PNG van je gradient is geen optie?
Desnoods wat spelen met opacity en andere kleurtinten om die overlay te simuleren.

Heb je voorbeeld online? Ben zeker dat er wel een betere oplossing moet zijn.

Edit: wat staat er in je header allemaal? Een optie is om van die header volledig een afbeelding te maken, maar hangt beetje af natuurlijk van wat er in moet.

Dit is perfect mogelijk met CSS3, kijk hier eens:
Speed Up with CSS3 Gradients | CSS-Tricks

Verdorie, had een reply getypt maar niet gepost.

BramVroy zei:

probleem dat en pattern dat vanachter ... (just so you know )

Het is nog niet volledig duidelijk wat je wilt. Afbeelding/voorbeeld/test case?

Klik om te vergroten...

Bedankt, heb het aangepast. Hier kan je duidelijk zien wat ik wil bereiken. Gewoon hetzelfde effect, maar in de plaats van egaal oranje is het een achtergrond met pattern.

W0utR zei:

Een transparante PNG van je gradient is geen optie?
Desnoods wat spelen met opacity en andere kleurtinten om die overlay te simuleren.

Klik om te vergroten...

Dat heb ik reeds geprobeerd, maar dat trekt op niets. Het gewenste effect bereik 'k niet.

Code van je header en de css die je gebruikt en het pattern?