1. Bellodogg
  2. de Cock
  3. Overige vragen
  4. vrijdag 20 maart 2020
Hallo, ik heb in een module een banner gezet.

De code
images/banners/Header3_ncj.png



Nu wil ik er voor zorgen dat deze responsive wordt. Nu wordt de banner bij een kleiner scherm smaller, maar ik wil dat deze gelijk blijft. Hoe doe ik dat? (mobiel lukt. Ik heb een extensie die modules geschikt maakt voor smartphone)

Tim
Geaccepteerde antwoord
Geaccepteerde antwoord Pending Moderation
Hallo Tim,
Wat je dus wilt is niet dat de afbeelding kleiner wordt weergegeven (dus meeschaalt met de breedte van het scherm), maar dat op een klein scherm een deel van de afbeelding wordt getoond. En op een groot scherm de volledige afbeelding. Zoiets?
In dat geval moet je de afbeelding als een achtergrondafbeelding instellen.


<div style="background-image: url('/images/banners/Header3_ncj.png'); min-height: 150px;">
Hier kun je eventueel nog tekst kwijt
</div>


Ik heb min-height in de code gezet, zodat de afbeelding sowieso wordt getoond. De hoogte van de div-container past zich namelijk aan aan de inhoud/content binnen de div. Als er geen tekst is dan is er ook geen hoogte en wordt de afbeelding alsnog niet getoond.
Wat je nog moet instellen is een background-size. Hier kun je lezen en testen welke voor jou van toepassing is: https://www.w3schools.com/cssref/css3_pr_background-size.asp
Yolknet - all for web
  1. een week geleden
  2. Overige vragen
  3. # Permalink
Geaccepteerde antwoord Pending Moderation
Hallo Tim,

misschien dat je de link van de website kan delen zodat we dit snel kunnen oplossen.

Vriendelijke groeten,

Ron :)
  1. een week geleden
  2. Overige vragen
  3. # 1
  • Pagina :
  • 1


Er zijn nog geen reacties op dit bericht.
Wees een van de eersten om op dit bericht te reageren!