replace color box by image in css

Question

Good afternoon guys, next I have some text boxes that are being formatted via css wanted to know if it is possible to change the formatting of these boxes to images, without having to change the formatting in the main html or script pages.

follows the code

.box-wrapper{
height: 500px;
width: 500px;
font-size: 50px;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#pag-1{
background-color: yellow;
}
#pag-2{
background-color: limegreen;
/*display: none;*/
}
#pag-3{
background-color: blue;
/*display: none;*/
}
#pag-4{
background-color: red;
/*display: none;*/
}

Answer 1

I made an example by placing image instead of color, see if it solves your problem, otherwise advise to edit the answer.

#page1{
width: 200px;
height: 200px;
background: red;
background-size: 200px;
  background-image:   url(https://static.pexels.com/photos/28221/pexels-photo-28221.jpg);
  background-repeat: no-repeat;
  float:left;
}

#page2{
margin-left: 5px;
width: 200px;
height: 200px;
background: blue;
background-size: 200px;
  background-image:   url(https://s-media-cache-ak0.pinimg.com/736x/ff/40/a6/ff40a667d68d2ab5d0b850eaa0664d82.jpg);
  background-repeat: no-repeat;
  float:left;
}

<div id="page1"></div>
<div id="page2"></div>