teratail
回答率
85.47%
質問するログイン新規登録
トップHTMLに関する質問背景の画像が模写サイトのように伸縮されない

編集履歴

回答編集履歴

6

追記

2019/05/05 06:12

投稿

wataame
wataame

スコア302

test CHANGED
@@ -20,13 +20,15 @@
20
20
 
21
21
  background-color: #000;
22
22
 
23
- background-size: cover;
23
+ height: 0;
24
24
 
25
- width: 100%;
25
+ background-repeat: no-repeat;
26
26
 
27
- height: auto;
27
+ background-repeat: no-repeat;
28
28
 
29
- background-position: right;
29
+ background-position: center center;
30
+
31
+
30
32
 
31
33
  }
32
34
 
@@ -34,4 +36,4 @@
34
36
 
35
37
 
36
38
 
37
- ![イメージ説明](cd7f3aa688a71cffd0d02857c2aa0a84.jpeg)
39
+ ![イメージ説明](dbfa30959008112ef8dff2ca469d37f3.jpeg)

5

追記

2019/05/05 06:12

投稿

wataame
wataame

スコア302

test CHANGED
@@ -6,35 +6,29 @@
6
6
 
7
7
  ```css
8
8
 
9
- .search {
9
+ .background-img {
10
10
 
11
- padding:15px 15px 15px 30px;
11
+ max-width: 100%;
12
12
 
13
- margin-left: 5px;
13
+ margin-top: 8px;
14
14
 
15
- background: url('img/search-icon.png') no-repeat 0px 0px; /* 修正 */
15
+ background-image: url(https://a0.muscache.com/airbnb/gift_credit_v2/HomePage/BackgroundHomeSummer.jpg);
16
16
 
17
- font-size: 20px;
17
+ background-size: cover;
18
18
 
19
- box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
19
+ padding-bottom: 250px;
20
20
 
21
- border-style: solid;
21
+ background-color: #000;
22
22
 
23
- border-color: rgb(235, 235, 235) ;
23
+ background-size: cover;
24
24
 
25
- border-radius: 4px ;
25
+ width: 100%;
26
26
 
27
- ackground-size: cover;
27
+ height: auto;
28
28
 
29
- width: 100%;
30
-
31
- height: auto;
32
-
33
- background-position: right;
29
+ background-position: right;
34
30
 
35
31
  }
36
-
37
-
38
32
 
39
33
  ```
40
34
 

4

追記

2019/05/05 06:04

投稿

wataame
wataame

スコア302

test CHANGED
@@ -24,12 +24,20 @@
24
24
 
25
25
  border-radius: 4px ;
26
26
 
27
- background-size:contain;
27
+ ackground-size: cover;
28
28
 
29
+ width: 100%;
30
+
31
+ height: auto;
32
+
29
- background-repeat: no-repeat;
33
+ background-position: right;
30
34
 
31
35
  }
32
36
 
33
37
 
34
38
 
35
39
  ```
40
+
41
+
42
+
43
+ ![イメージ説明](cd7f3aa688a71cffd0d02857c2aa0a84.jpeg)

3

修正

2019/05/05 06:03

投稿

wataame
wataame

スコア302

test CHANGED
@@ -1,4 +1,4 @@
1
- .searchクラスのbackgroundの数値を変更してみはいかがでしょうか。。
1
+ 下記の内容でいかがでしょうか。。
2
2
 
3
3
 
4
4
 
@@ -24,6 +24,10 @@
24
24
 
25
25
  border-radius: 4px ;
26
26
 
27
+ background-size:contain;
28
+
29
+ background-repeat: no-repeat;
30
+
27
31
  }
28
32
 
29
33
 

2

追記

2019/05/05 05:52

投稿

wataame
wataame

スコア302

test CHANGED
@@ -29,7 +29,3 @@
29
29
 
30
30
 
31
31
  ```
32
-
33
-
34
-
35
- ![イメージ説明](80c0a3fd1662bbb1d0934fdb18bd8573.jpeg)

1

追記

2019/05/05 05:48

投稿

wataame
wataame

スコア302

test CHANGED
@@ -1,10 +1,4 @@
1
- .searchクラスのbackgroundのパスを変更してみはいかがでしょうか。。
1
+ .searchクラスのbackgroundの数値を変更してみはいかがでしょうか。。
2
-
3
- （background: url('https://img.icons8.com/windows/2x/google-web-search.png') no-repeat 9px 20px;だと反映されましたのでパスの問題かと思われます。※絶対パス）
4
-
5
-
6
-
7
- 添付画像のようにcssフォルダ同様、imgフォルダ（画像を入れておく）を用意して下記のコードにすれば反映されるかと思います。
8
2
 
9
3
 
10
4
 
@@ -18,7 +12,7 @@
18
12
 
19
13
  margin-left: 5px;
20
14
 
21
- background: url('img/search-icon.png') no-repeat 9px 20px; /* 修正 */
15
+ background: url('img/search-icon.png') no-repeat 0px 0px; /* 修正 */
22
16
 
23
17
  font-size: 20px;
24
18