質問させてください。
下の図のような、背景画像が画面の真ん中辺りからウィンドウの右端まで伸びていて、画像の左側にはテキストを配置する形を、CSSで表現するにはどういった方法がありますでしょうか。
現状では下のような半分透明な背景画像を作って、background-size: 100%
で表示させているのですが、これだけのために透明部分があるような画像を作るのは手間ですし、モバイルサイズでは使えないので別の画像に切り替える必要があるため釈然としません。
なので、下の何の変哲もない普通の写真を背景画像として使いたいです。
サンプルイメージはこちら
コードは下記になります。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>サンプル</title> 7 <link rel="stylesheet" href="style.css"> 8 </head> 9 <body> 10 11 <div class="bg"> 12 <div class="content"> 13 <p class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 14 </div> 15 </div> 16 17 </body> 18</html> 19
css
1@media screen and (max-width: 767px) { 2 .bg { 3 padding-bottom: 55vw; 4 /* この写真だけ使いたい */ 5 background: url(bg.png) center bottom /100% no-repeat; 6 } 7} 8 9@media screen and (min-width: 768px) { 10 .bg { 11 /* 透明部分があるPC用画像(これを使いたくない) */ 12 background: url(bg2.png) center top /100% no-repeat; 13 } 14} 15 16@media screen and (min-width: 768px) { 17 .content { 18 width: 720px; 19 margin-right: auto; 20 margin-left: auto; 21 } 22} 23 24@media screen and (min-width: 992px) { 25 .content { 26 width: 940px; 27 } 28} 29 30@media screen and (min-width: 768px) { 31 .txt { 32 width: 48%; 33 } 34}
PC用の画像を使わずにこのような表現をするにはどうすれば良いかというのが質問内容になります。
ブラウザはchromeとfirefoxで確認しました。
もしどなたか良い方法をご存知の方がいらっしゃいましたら、ご教授いただけますと助かります。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー