<div class="wrap">
  <div class="conts">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>25</p>
        <p>26</p>
        <p>27</p>
        <p>28</p>
        <p>29</p>
        <p>30</p>
    </div>
</div>
*{
margin:0;
padding:0;  
}
.wrap{
background-repeat:no-repeat;
background-position:50% 100%;
background-image:url(https://web.runland.co.jp/wp-content/uploads/2020/04/20200510_bg.jpg);
background-attachment:fixed;
background-size:cover;
padding:5%;
}
.conts{
background-color:rgba(255,255,255,0.8); 
border-radius: 10px;
font-size:40px;
text-align:center; 
padding:5%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.