[CSS] 2 backgrounds over elkaar?

[Duncank]

Ik heb op mijn pagina een div met daarin een achtergrond-afbeelding. Dit is een kleine afbeelding die zich op de achtergrond van die div herhaalt en deze dus helemaal invult.
Nu wil ik over deze afbeelding een gradient laten lopen die ik ook als losse afbeelding heb. Hoe doe ik dit?

Ik heb ongeveer:

.topdiv {
background-image : url('img/achtergrond.png');

en de losse "gradient.png" (met een transparante achtergrond natuurlijk.)

[Zeebonk]

je kan een extra div over topdiv leggen, waarin je daar

background-image : url('img/gradient.png');

doet.

edit.

je zou natuurlijk ook de twee afbeeldingen in elkaar kunnen photoshoppen, maar weet niet of dat in jouw geval handig is.

[ Voor 37% gewijzigd door Zeebonk op 12-10-2008 14:26 ]

[Duncank]

Het in elkaar photoshoppen is in dit geval niet handig omdat de achtergrond van de topdiv als een pattern herhaald wordt en geen vaste maat heeft, dit moet kunnen varieren.

De div's over elkaar leggen geeft me dit:
http://projectfive.nl/test.php

Ik heb hier nu dus:

<div class="topdiv">
<div class="gradblack">
hier mijn tekst
</div></div>

in de css zijn deze 2 als volgt geregeld:

.gradblack {
background-image : url('img/gradblack.png');
background-size : auto;
margin : 0px;
padding : 0px;
}

.topdiv {
background-image : url('img/divbg1.png');
border-top : 1px solid black;
border-bottom : 1px solid black;
margin : 0px;
padding : 0px;
}


en toch houd ik zoals je ziet op de link die ik gaf, een rand aan de boven en onderkant. en dat is niet de bedoeling...

[SandaX]

Als je de <p> tag eruit haalt zul je zien dat hij er perfect uitziet. De margin binnen deze tag helpt je idee namelijk om zeep.

[ Voor 29% gewijzigd door SandaX op 12-10-2008 14:44 ]

[Duncank]

Geweldig! Dankjewel!

[Cartman!]

Slecht advies imo. Haal dan de margin/padding eraf en laat het in die <p> staan, gebruik de elementen waarvoor ze bedoeld zijn.

[SandaX]

Is idd wat beter, had het even vlug getest, vandaar mijn edit dat het de margin was die het om zeep hielp (dit was een impliciete tip om de margin er dan maar uit te halen ipv het hele element te verwijderen)

[Duncank]

Klopt, die had ik inmiddels zelf ook al aangepast.
Zit ik nog met 1 vraagje, wanneer de tekst langer is dan de afbeelding die ik als achtergrond ingesteld heb bij de gradient, stopt de gradient gewoon. Een background-repeat is niet mooi hier, weten jullie misschien een manier om te zorgen dat de background strecht in de hoogte en zich dus aanpast aan de hoogte van de div?

[Zeebonk]

Al zou CSS3 al ondersteuned worden dan kon je: background-size kunnen gebruiken. Maar dat kan nog niet. Om dit toch voor elkaar te krijgen, moet je met een echte <img> aan de gang en de z-index property.

Hier wordt het mooi uitgelegd:
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

Vergeet niet dat als je met png transparante images aan de gang gaat, het er in sommige oudere browsers niet uit ziet.