Achtergrondafbeeldingen met CSS

Moeilijkheidsgraad

trefwoorden

Er zijn een aantal modules die je toelaten om in een node of view een achtergrondafbeelding te gebruiken.

Toch is het simpel om dit met enkele regels CSS code zelf te doen.

Ik neem hier een node als voorbeeld

Screen001682.png

Ik heb wat tekst boven op een achtergrondafbeelding geplaatst. Responsive natuurlijk. De afbeelding heb ik in de map sites/default/files/afbeeldingen geplaatst. Daarom is er ../../ nodig om in de URL enkele mappen hoger te klimmen. Met background-size:cover maak je dat de afbeelding automatisch het zichtbare gedeelte bedekt. Vergeet niet reeds bestaande achtergrondkleuren als transparent te plaatsen.

De ID heb ik met de inspector van mijn browser gedetecteerd en is thema afhankelijk. Je moet dus zelf eerst kijken wat voor klasse of ID je nodig hebt. Voor de rest zorg ik dat er een minimum aan hoogte is voor de afbeelding. Anders toont hij enkel de hoogte van de tekst en toont hij de afbeelding niet.

#rid-content{
   background-image:url("../../afbeeldingen/verrekijker.jpg");
   background-attachment: scroll;
   background-size: cover;
}
.node{
   background-color:transparent;
   color:white;
   min-height:642px;
}
@media screen and (min-width:680px) and (max-width:961px) {
  
.node{
  min-height:400px;
}
  
}
@media screen and (max-width:680px) {
  
.node{
  min-height:250px;
}
  
}