Ondersteuning » Thema en CSS/opmaak » Image in footer over hele breedte

  • Op mijn website: http://royveekens.nl/Laver/ zou ik graag een image in mijn footer widget ruimte zetten, maar dan over de hele breedte.

    Ik heb een image die dezelfde breedte heeft als mijn header afbeelding.

    Maar als ik die via de image widget erin plaats, dan krijg ik hem heel klein (zoals je nu linksonder ziet).

    Hoe krijg ik dit voor elkaar dat ik een image helemaal voer de hele breedte van de footer kan plaatsen, net zoals de header nu is.

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Hi Roy

    1. verwijder de huidige kleine afbeelding
    2. plaats deze code in de css-‘style.css’van je [child]theme of css-tool van je site
    3. .site-footer {
      	background-color: #000;
      	 background-image: url("http://royveekens.nl/Laver/wp-content/uploads/2016/05/merken-die-wij-voeren.jpg");
      	z-index: 3;
      }

    Natuurlijk kan je hiervoor elke afbeelding naar keuze gebruiken…. verander de naam van het bestand.

    Loop je vast? Vraag gerust

    Thread starter royv1981

    (@royv1981)

    De breedte is perfect, maar…

    de hoogte klopt niet. hoe hoog mag de image zijn in een fouter?

    Hi,

    Ook dat kan je zelf bepalen voorbeeld [pas aan naar wens]

    .site-footer {
    	background-color: #000;
    	 background-image: url("http://royveekens.nl/Laver/wp-content/uploads/2016/05/merken-die-wij-voeren.jpg");
    	z-index: 3;
            height:120px;
    }
    Thread starter royv1981

    (@royv1981)

    Super bedankt!

    Laatste vraag. wat als ik 2 images onder elkaar zou willen hebben, wat moet ik dan veranderen aan de code?

    Hi,

    Graag gedaan.
    Dat zou ik niet met code doen, want dat kan snel ‘een puzzel’ worden.

    1. Gebruik een grafisch programma, bijv. GIMP > open een nieuw bestand
    • OPGELET geef op: de juiste maat van beide afbeeldingen samen
    • stel de achtergrond van de nieuwe afbeelding in op ‘transparant

    — — —

    • voeg het eerste bestand in [slepen]
    • zet de afbeelding op zijn plek
    • open een nieuwe laag
    • sleep het tweede bestand op de nieuwe laag
    • zet de beide afbeelding op zijn plek
    • voer alle gewenste aanpassingen door
    • — — —

    • Tevreden? >> exporteer het bestand als PNG-bestand zo blijft de transparante achtergrond behouden
    • WP: sleep de afbeelding naar de mediabibliotheek [of FTP]
    • >>noteer het volledige pad van het bestand!

    • verander het pad in bovenstaande code in dat van het nieuwe bestand bijv ‘background-image: url(“http://royveekens.nl/Laver/wp-content/uploads/2016/05/nieuwe_footer.png”);’
    • Loop je vast? vraag gerust.

    Thread starter royv1981

    (@royv1981)

    Ik heb nog een vraag.
    Op een pc ziet de fouter er perfect uit!

    Maar hij past de breedte niet aan op een ander apparaat/ander formaat monitor.

    Bv. op telefoon zie je maar klein stuk van de afbeelding.
    Hoe kan ik dit aanpassen dat breedte formaat automatisch wijzigt op ander apparaat?

    Hi,

    Maar hij past de breedte niet aan op een ander apparaat/ander formaat monitor.

    Bv. op telefoon zie je maar klein stuk van de afbeelding.
    Hoe kan ik dit aanpassen dat breedte formaat automatisch wijzigt op ander apparaat?

    Ik moet ff ‘studeren’ hoe dat in jouw geval te doen…

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Het onderwerp ‘Image in footer over hele breedte’ is gesloten voor nieuwe reacties.