webサイト上の画像を半分で設置させたい

架空のブランドサイトを作成しています。

<div class="About">内のコンテナ内の右半分にフルサイズで画像を表示させたいのですが、コードの記述がわからず、詰まってしまっています。

background-size: 70px;

サイズのの記述を使い試してみましたが、大きさに特に変化は現れませんでした。

どなたかご教授頂きたい所存です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>ブランドサイト</title>
6        <link href="css/style.css" rel="stylesheet">
7    </head>
8
9	<body>
10   <header>
11    <div class=""></div>
12     <ul>
13      <li class="lo">Home</li>
14      <li class="lo">About</li>
15      <li class="lo">Product</li>
16      <li class="lo">Online Store</li>
17      <li class="lo">NEWS</li>
18     </ul>
19   </header>
20   <div class="container">
21     <div class="main">
22      
23     </div>
24     <div class="consept">
25       <h1>おいしさ際立てる、美しさ</h1>
26       <p>○○県○○市、この地域に構える○○店。
27          様々な料理に合わせたお皿を提供し、料理のおいしさ、美しさを引き立てます。
28
29          
30
31       </p>
32     </div>
33     <div class="About">
34       <h3>About</h3>
35        <p></p>
36        <img src="35531127.jpg">
37      </div>
38     <div class="purodakut">
39      <h3>Product</h3>
40
41     </div>
42     <div class="Online"></div>
43     <div class="news"></div>
44    <footer></footer>
45   </div>
46	</body>
47</html>
48

CSS
1body{
2  margin: 0;
3  padding: 0;
4}
5
6
7ul{
8  text-align:right;
9  padding-right:500px;
10  padding-top:20px;
11}
12
13li{
14  display: inline;
15}
16
17.lo{
18  padding:0px;
19  margin-right: 30px;
20}
21
22li:hover{
23  opacity: 0.5;
24}
25
26li{cursor: pointer}
27
28.main{
29  height: 80vh;
30  background-size:cover;
31  background-image: url(..//tom-chen-6DH6BojClJg-unsplash.jpg);
32}
33
34.consept{
35text-align: center;
36}
37
38.About{
39  text-align:right;
40}
41
42.About h3{
43  text-align:left;
44}
45
46img{
47  background-size: 300px;
48  
49}
50
51.purodakut{
52text-align: center;
53}