Background images with CSS

Rating

tags

There are a number of modules that allow you to use a background image in a node or a view.

Yet it is easy to do this with a few lines of CSS code. I take a node as an example.

Screen001682.png

I have some text superimposed on a background image. Responsive of course. The picture I posted in this folder: sites / default / files / images. Therefore, there is need to climb  ../../  in the folder structure in the URL. With background-size: cover, you make the image automatically covering the visible area. Remember to place already existing background color as transparent.

The #rid-content, I detected with the inspector of my browser and is theme-dependent. So you have to look yourself what class or ID you need. For the rest, I made sure there is a minimum height of the image. Otherwise, it just shows the heigth of the text and it does not show the image.

#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;
}
  
}