スマホ向けのページを作っています。
背景画像:url('img/bg.png')をdivの要素(middle)によって
画像の大きさを変更したいのですがうまくいきません。
background-size: cover;でも、
画像がbottomエリアの下に隠れてしまいます。
何か良い方法はないでしょうか
js
1 2 3<!DOCTYPE HTML> 4<html> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="minimal-ui"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 10 11 <style type="text/css"> 12 13*{ 14 margin:0; 15 padding:0; 16 font-size: 48px; 17 font-family: 'メイリオ'; 18} 19 20html,body{ 21 height: 100%; 22} 23 24 25#middle{ 26 27 height:100%; 28 width: 100%; 29 30 background-color: #33ccdd; 31 32 position:absolute; 33 34 top:0; 35 margin: 0 auto; 36 box-sizing: border-box; 37 -webkit-box-sizing: border-box; 38 39 color: #000; 40 text-align: center; 41 42 display: flex; 43 align-items: center; /* 縦方向中央揃え */ 44 justify-content: center; /* 横方向中央揃え */ 45 flex-direction: column; 46 47 background-image: url('img/bg.png'); 48 background-size: cover; 49 50} 51 52 53#bottom{ 54 55 color: #fff; 56 height: 5%; 57 width: 100%; 58 background-color: #0099cc; 59 position:absolute; 60 bottom:0; 61 z-index: 9; 62 padding:16px; 63 box-sizing: border-box; 64 /*-webkit-box-sizing: border-box;*/ 65 66 text-align: center; 67 68} 69 70 71 72 </style> 73 74 75</head> 76<body> 77 <form action="" method="post" onsubmit="return false;"> 78 79 <div id="middle"> 80 81 </div> 82 83 <div id="bottom"> 84 85 </div> 86 87 </form> 88 89</body> 90</html> 91 92
「background-size: cover;でも、 画像がbottomエリアの下に隠れてしまいます。」とは?具体的に、どのような表示を望んでいるのか、現状どのような表示なのか?もう少しわかりやすく説明していただけると。
回答1件
あなたの回答
tips
プレビュー