■画像をウィンドウ幅100％まで引き延ばし■
どうしても小さ目の画像しか作れん場合に便利。100ｖｈとは四角画像でないと変形表示されるため不可。横幅長くて縦幅小さい画像に適用すべき。
▲ＨＴＭＬ▲<p class=”header01″><img src=”image/bg_header.png” width=”1500″ height=”96″ alt=””/></p>
▲ＣＳＳ▲
header .header01 img{ width:100%; ｝
・イメージタグにwidth:100%;にしておく。うまくできなかったら親要素もwidth:100%;する。・参考→牧場サイト/サブページ/ヘッダーの上部分。
▲この画像の上にナビ画像などを配置▲
そのままではナビが下に行くので重なり順を変更する。
header .header01 img{ ←背景画像
width:100%;
margin-top:-10px;
position: relative;
z-index:1;
}
header #header ul{ ←ナビボタン
margin:-65px 0 0px 1200px;
position: relative;
z-index:2;
}
・position: relative;は必ずいる。
・indexは数字の大きい方が前面。