How to add a background image to a section CSS

Question

I am trying to get a section up and running on my website. I want to add a background image instead of a color. I have tried reading here and other websites and nothing I try seems to work. I am using this section code:

https://codepen.io/ckor/pen/lBnxh

!* {
box-sizing: border-box; 
}

ebody {
margin: 0; 
font-weight: 500;
font-family: 'HelveticaNeue';
}

esection {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;

background-image: url('https://s15.8cb2jiu3/banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;

&:nth-of-type(2n) {
background-color: #D55B79;
}
}

.eintro {
 height: 90vh;
 }

 .econtent {
  display: table-cell;
  vertical-align: middle;
  }

  eh1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
  }

  ep {
  font-size: 1.5em;
  font-weight: 500;
  color: #C3CAD9;
  }

  ea {
  font-weight: 700;
  color: #373B44;
  position: relative;

  e&:hover{ 
  opacity: 0.8;
  }

  e&:active {
  top: 1px;
  }
  }

  efooter {
  padding: 1% 5%;
  text-align:center;
  background-color: #373B44;
  color: white;

  ea {
  color: #FE4B74;
  font-weight: 500;
  text-decoration: none;
  }
  }

I have added this to the code:

 section {
    width: 100%;
    padding: 0 7%;
    display: table;
    margin: 0;
    max-width: 100%;

    background-image: url('https://s15.banner_test.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;

The goal is to add images that are left or right justified and then add some text to the section. I am aiming for a left image then the next box is a right image and so on. I have seen the effect on other websites and it looks good if done correctly.

Answer 1

In order to add background image to any html element you will need the following line added to your css:

background-image: url("pathtoimage");

In your css code there is :

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
  }
  section:nth-of-type(2n) {
    background-color: #FE4B74;
  }

this code here will fetch for all section html tags and apply to them the styles.

in here you can even notice the first background-color:#373B44; that is applied to all sections and the second background-color: #FE4B74; that is only applied to sections with that are 2n

for example:

(1st section html element in your page) Section 1 will be color #373B44 (2nd section html element in your page) Section 2 will be color #FE4B74 (3rd section html element in your page) Section 3 will be color #373B44 (4th section html element in your page) Section 4 will be color #FE4B74 and so on

Now in order to add a background-image , all we have to do is add the code I provided above to your section in that way

    section {
      width: 100%;
      padding: 0 7%;
      display: table;
      margin: 0;
      max-width: none;
      background-color: #373B44;
      height: 100vh;

      /*added here*/
      background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
       /*added here*/ }

      section:nth-of-type(2n) {
        background-color: #FE4B74;
      }

However, now you have two problems : 1- same background image in all sections (no alternating) 2- the image might be too small , not fit or might be repeated in a bad looking way

so in order to solve problem 1 all you have to do is just the same thing as what happens with background-color . So we just add another background-image under the 2n like so :

 section {
      width: 100%;
      padding: 0 7%;
      display: table;
      margin: 0;
      max-width: none;
      background-color: #373B44;
      height: 100vh;
        background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");}

      section:nth-of-type(2n) {
        background-color: #FE4B74;
        /*this will overwrite the other background image for your 2n sections*/
        background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
      }

In order to solve the 2nd issue , you might want to use the following:

  background-repeat:no-repeat; /*removes repetition*/
  background-size:cover; /*allows picture to take up whole section space*/

and the final code will look like this

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
    background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
    background-repeat:no-repeat;
  background-size:cover;}

  section:nth-of-type(2n) {
    background-color: #FE4B74;
    background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
  }

To better understand the background properties in CSS , I would really suggest going into the following link : https://www.w3schools.com/css/css_background.asp

And this link will help you understand the section:nth-of-type(2n) https://www.w3schools.com/cssref/sel_nth-of-type.asp

The codepen link https://codepen.io/sara-kat/pen/gKrVpg

Have a good day

Answer 2

There is a really simple solution to this, actually. The link to the image isn't working. You don't have to change anything about the rest.

I gave your second section the class bg and put your code to style that section in your CSS. It works if you use a working link:

Codepen

section.bg {
    width: 100%;
    padding: 0 7%;
    display: table;
    margin: 0;
    max-width: 100%;

    background-image: url('//unsplash.it/1200/800');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}