画像に z-index を設定します:
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Try it Yourself ❯
z-index プロパティは、要素の重なる順序を指定します。
スタック順序の値が大きい要素は、スタック順序の値が小さい要素の前面に表示されます。
注: z-indexは、配置指定の要素(position:absolute、position:relative、position:fixed)でのみ動作します。
デフォルト値: | auto |
---|---|
継承: | 継承する |
アニメーション可否: | 可。animatable を参照 Try it |
バージョン: | CSS2 |
JavaScript 構文: | object.style.zIndex="-1" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
プロパティ | |||||
---|---|---|---|---|---|
z-index | 1.0 | 4.0 | 3.0 | 1.0 | 4.0 |
z-index: auto|number|initial|inherit;
値 | 説明 | Play it |
---|---|---|
auto | 親と同じスタック順序を設定します。これがデフォルトです | Play it ❯ |
number | 要素のスタック順序を設定します。負の値が使用できます | Play it ❯ |
initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS チュートリアル: CSS Positioning
HTML DOM リファレンス:
zIndex property