背景画像が拡大されてしまいます。

Question

上の画像のようにしたいのですが、下のようになってしまいます。
どうしたらいいのでしょうか。

#sa {
	width: 1280px;
	height: 440px;
	margin: 0 auto;
	background: url(../images/o8.jpg)
}

<div id="ce">
        <div id="sa">
    	<h2>収益化してみま<br>すか？</h2>
    	<button>はじめる</button>
        </div>
    </div>

Answer 1

background-sizeでサイズ指定をすればできるかと思います。

background-size: contain;またはbackground-size: auto 440px;あたりで…

まとめて指定するなら↓な感じ

background: url(../images/o8.jpg) no-repeat center / contain;

Answer 2

こちらでいかがでしょうか?

<div id="ce">
    <div id="sa">
        <div class="container">
            <h2>収益化してみま<br>すか？</h2>
            <button>はじめる</button>
        </div>
    </div>
</div>

#sa {
    width: 1280px;
    height: 440px;
    margin: 0 auto;
    
    /* 追加 */
    box-sizing: border-box;
    padding: 40px 0;
    background-image: url(../images/o8.jpg);
    background-position: center center;
    background-size: cover;
}

/* 追加 */
#sa .container {
  margin: 0 40px;
}
#sa h2 {
  text-align: left;
}