teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問HTML CSS レスポンシブで背景画像がボケる件

編集履歴

質問編集履歴

10

修正

2019/06/21 15:33

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -11,7 +11,7 @@
11
11
  CSS
12
12
  ```ここに言語を入力
13
13
  .pix-hotel-1 {
14
- background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../images/hotel/intro-bg-hotel.jpg');
14
+ background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../uploads/image-design-5-DH0.jpg');
15
15
  background-size: cover;
16
16
  background-attachment: fixed;
17
17
  background-position: -330px;

9

修正

2019/06/21 15:33

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -3,6 +3,7 @@
3
3
 
4
4
  uploads/image-design-5-DH0.jpg 部分が背景画像になります。
5
5
 
6
+ HTML
6
7
  ```ここに言語を入力
7
8
  <div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
8
9
  ```

8

修正

2019/06/21 15:30

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,17 @@
7
7
  <div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
8
8
  ```
9
9
 
10
+ CSS
11
+ ```ここに言語を入力
12
+ .pix-hotel-1 {
13
+ background-image: linear-gradient(rgba(54, 63, 72, 0.85), rgba(54, 63, 72, 0.85)), url('../images/hotel/intro-bg-hotel.jpg');
14
+ background-size: cover;
15
+ background-attachment: fixed;
16
+ background-position: -330px;
17
+ -webkit-background-size: cover;
18
+ background-size: cover;
19
+ }
20
+ ```
10
21
 
11
22
  image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
12
23
 

7

修正

2019/06/21 15:29

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  Bootstrapでレスポンシブのサイトを作っています。
2
2
  以下の様なコードをindex.htmlの中に記述をしています。
3
3
 
4
- uploads/image-design-5-DH0.jpg 部分が画像になります。
4
+ uploads/image-design-5-DH0.jpg 部分が背景画像になります。
5
5
 
6
6
  ```ここに言語を入力
7
7
  <div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">

6

修正

2019/06/21 14:21

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ブーストラップでレスポンシブのサイトを作っています。
1
+ Bootstrapでレスポンシブのサイトを作っています。
2
2
  以下の様なコードをindex.htmlの中に記述をしています。
3
3
 
4
4
  uploads/image-design-5-DH0.jpg 部分が画像になります。

5

修正

2019/06/21 14:20

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
@@ -1,1 +1,1 @@
1
- 至急 HTML CSS レスポンシブで背景画像がボケる件
1
+ HTML CSS レスポンシブで背景画像がボケる件
body CHANGED
File without changes

4

修正

2019/06/21 14:19

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,7 @@
8
8
  ```
9
9
 
10
10
 
11
- Untitled-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
11
+ image-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
12
12
 
13
13
  これは何が原因でしょうか？
14
14
 

3

修正

2019/06/21 14:15

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,10 @@
1
1
  ブーストラップでレスポンシブのサイトを作っています。
2
2
  以下の様なコードをindex.htmlの中に記述をしています。
3
3
 
4
- uploads/Untitled-design-5-DH0.jpg 部分が画像になります。
4
+ uploads/image-design-5-DH0.jpg 部分が画像になります。
5
5
 
6
6
  ```ここに言語を入力
7
- <div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/Untitled-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
7
+ <div class="pix_section pix-padding-top-80 pix-padding-bottom-40 pix-hotel-1" style="padding-top: 212px; background-image: linear-gradient(rgba(54, 63, 72, 0.25), rgba(54, 63, 72, 0.25)), url(&quot;uploads/image-design-5-DH0.jpg&quot;); background-size: cover; background-repeat: repeat-x; background-attachment: fixed; padding-bottom: 40px;" data-bg-img="linear-gradient( rgba(54,63,72,0.25) ,rgba(54,63,72,0.25)),url(&quot;uploads/image-design-5-DH0.jpg&quot;)" id="section_2" data-pix-offset="72">
8
8
  ```
9
9
 
10
10
 

2

修正

2019/06/21 14:15

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,7 @@
8
8
  ```
9
9
 
10
10
 
11
- Untitled-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX で表示すると拡大してボケてしまいます。
11
+ Untitled-design-5-DH0 の画像をクロームで見ると問題ないのですが、iPhoneX の実機で表示すると拡大してボケてしまいます。
12
12
 
13
13
  これは何が原因でしょうか？
14
14
 

1

タグ変更

2019/06/21 14:13

投稿

takeshi1907
takeshi1907

スコア54

title CHANGED
File without changes
body CHANGED
File without changes