グラデーションについて

前提・実現したいこと

https://isara.life/
上記サイトを模写中です
上記サイトのトップ部分のように背景にグラデーションをかけたい

発生している問題・エラーメッセージ

片方の画像のみにグラデーションがかかりもう片方に変化がない


### 該当のソースコード
<div class="top">
      <div class="container">
        <h1>プログラミングで<br>
          人生の安定を手に入れよう
        </h1>
        <img src="./isaraimages/isaralogolarge.png" alt="isaralogolarge">
        <p>バンコクのノマドエンジニア育成講座<br>
          iSara[イサラ]
        </p>
      </div>
    </div>
```html

.container{
width:100%;
background:radial-gradient(ellipse at center, rgba(255,255,255,1)20% ,rgba(255,255,255,0.8)35%,rgba(255,255,255,0)),url(./isaraimages/4-1-1.jpg), url(./isaraimages/src_10844215.jpg);
background-size:50%,50%;
background-repeat: no-repeat;
background-position:left,right;
}
css



### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
![イメージ説明](b08b8f6fcb1e134e1debe4cb3ed4dcb9.png)
![イメージ説明](7db19b3274331599e889f3deff3ef421.png)
よろしくお願いします！

yoshinavi

2019/09/13 11:07

模写先のコードを確認されましたか？

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

回答1件

ベストアンサー

下記修正でうまくいくと思います。

修正箇所

backgroundで背景画像、グラデーションを合計3つ指定しているのに対して、背景の大きさを指定しているbackground-sizeが2つしか指定されていないので、ここを3つ指定する。
文字を中央指定していないので、text-align: centerを入れてあげる。

css
1.container{
2    width:100%;
3    background:
4       radial-gradient(ellipse at center, rgba(255,255,255,1)20% ,rgba(255,255,255,0.8)35%,rgba(255,255,255,0)),
5       url(./isaraimages/4-1-1.jpg),
6       url(./isaraimages/src_10844215.jpg);
7    background-size:100%,50%,50%;                 /* 背景の大きさを指定 */
8    background-repeat: no-repeat;
9    background-position:left,right;
10    text-align: center;                           /* 文字を中央揃え */
11  }