Een achtergrond afbeelding achter de footer plaatsen (CSS)

[RoyK]

Beste tweakers,

Ik werk momenteel aan een layout voor een nieuwe webshop. Deze draait op Magento. Ik heb hier een prachtige Theme voor aangekocht welke ik nu eigen aan het maken ben. Op de achtergrond staat een image die de website voorziet van een leuke jasje. Hij staat helemaal tegen de bovenkant aan. Deze loopt uit naar beneden toe tot een vaste kleur, die ik ook als vaste background color gebruik en het naadloos overloopt.

Nu wil ik ook graag een plaatje in de footer plaatsen die op zijn beurt aan de bodem vast zit, en daar blijft plakken. Zeg iets van 4 a 500 px hoog. Maar dat laat het theme niet toe. Na contact gehad te hebben met de theme maker, kan ik een custom CSS toevoegen die de huidige CSS overruled, en zo nooit echt schade toegebracht kan worden.

Nu ben ik een beetje aan het rommelen met de HTML en CSS en hier en daar XML, maar ik loop hier direct op vast. Ik denk dat het vast een paar simpele regels zullen zijn aan data die in de CSS geplaatst moeten worden. Maar zou niet weten waar ik moet beginnen.

Welke held kan mij een handje op weg helpen?

[ Voor 12% gewijzigd door RoyK op 09-02-2014 13:50 ]

[klepje]

Dit kan inderdaad met een aantal CSS regeltjes. Ten eerste kun je de class "page" de volgende waardes meegeven:

Cascading Stylesheet:

.page {
background-repeat: no-repeat;
background-position: center bottom;
background-image: url(hier/je/image/path/of/url);
}

Je ziet dan dat de afbeelding nog niet wordt weergegeven, dit komt omdat in de footer nog een aantal background-colors staan ingesteld, die eroverheen vallen. Je kunt dit oplossen door de background-colors weg te halen, of in jou geval met de custom CSS te overriden:

Cascading Stylesheet:

.footer-container, .footer-primary-container, .footer-bottom-container, .footer-bottom, .footer {
background-color: transparent;
}

Je zult dan de afbeelding zien

[RoyK]

He-le-maal geweldig! Werkte meteen Klepje!! Held van mijn dag vandaag!

[ Voor 10% gewijzigd door RoyK op 11-12-2013 10:22 ]