background-colorはずらすことはできるのでしょうか？

上記の様なデザインにしたいのですが、このbackground-colorをずらした様なデザインがうまくできません。
試したことは、background-color自体をずらそうと、background-positionを指定しましたが、うまくいきませんでした。
わかる方、ご教授お願いします。
下記、該当コード部分です。

html
1<div class="main">
2      <div class="about-wrapper">
3        <div class="about">
4          <h2>ABOUT</h2>
5          <p>
6            私たちの社会は、10年前、100年前、あるいは1000年前よりも確実に進化しています。化学こそが社会を進化させ、幸せを作り出したのだと信じています。科学は与えられるものではなく、私たち自身が開拓し、進化させていくものです。144Labは、科学に触れ、さらなる開拓と進化に参加する人々を、ちょっとだけお手伝いします。
7          </p>
8          <a href="#">企業情報</a>
9        </div>
10      </div>

css
1.main {
2  width: 980px;
3  margin: 0 auto;
4}
5
6.about {
7  background-color: #f2f3f7;
8  background-size: 954px 283px; 
9  background-position: 20px 20px;
10}
11

行動規範の内容に同意します

回答2件

css
1        .about-wrapper {
2            width: 880px;
3            margin: 100px auto;
4        }
5
6        .about-wrapper .about p {
7            background-color: #f2f3f7;
8            padding: 50px;
9        }
10
11        .about-wrapper .about h2 {
12            height: 40px;
13            margin-bottom: -20px;
14        }

html
1
2<div class="main">
3    <div class="about-wrapper">
4        <div class="about">
5            <h2>
6                ABOUT
7            </h2>
8            <p>
9                私たちの社会は、10年前、100年前、あるいは1000年前よりも確実に進化しています。化学こそが社会を進化させ、幸せを作り出したのだと信じています。科学は与えられるものではなく、私たち自身が開拓し、進化させていくものです。144Labは、科学に触れ、さらなる開拓と進化に参加する人々を、ちょっとだけお手伝いします。
10            </p>
11            <a href="#">企業情報</a>
12        </div>
13    </div>
14</div>

投稿2020/04/26 02:33

編集2020/04/26 02:33

退会済みユーザー

総合スコア0

「background-colorをずらす」のは、おそらく難しいと思います。

添付された画像のような見た目を作る場合、自分なら以下のように見出しやボタンのほうをずらします。

CSS
1.about {
2  margin-top: 40px;
3  background-color: #f2f3f7;
4  background-size: 954px 283px;
5  background-position: 20px 20px;
6  
7  /* 追加 */
8  position: relative;
9  padding: 40px; /* 好きなように調整してください */
10}
11
12/* 追加 */
13.about h2 {
14  position: absolute;
15  top: -20px; /* 好きなように調整してください */
16  left: -20px; /* 好きなように調整してください */
17}
18.about a {
19  position: absolute;
20  bottom: -20px;
21  
22  /* 以下は、ボタンのつくり (display、width) の指定にあわせてカスタマイズしてください */
23  left: 0;
24  right: 0;
25  margin: 0 auto;
26  width: 200px;
27  text-align: center;
28}