How to add a background image to a section CSS - 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;
}