Blog

HOME > Web > css > 【CSS】左右で違う背景画像を表示

【CSS】左右で違う背景画像を表示

2016/02/10

css

新規案件で右側だけ左と違う背景表示が必要だったため実装をしました。

参考サイト
CSSで左右に別々の背景を設定する方法

cssの記述はそれほど難しくないです。
html

<div class="wrap">
    <div class="image"><img src="image01.png" height="300" width="1000" alt=""></div>
</div>

CSS

.wrap {
    height: 300px;
    background: #6D7088; //全体の背景
    position: relative;
}
.wrap:before {
    width: 50%; //表示幅
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 50%; //表示位置
    background: #22202B; //右側の背景
}
.wrap .image {
    position: absolute;
    left: 50%;
    margin-left: -500px; //画像幅1000pxとしてその半分をネガティブマージン
}

.wrapやwidthやleftは実際のサイトに合わせて調整します。

width:40%の時にはleft:60%のように合計が100%になるようにしてください。



ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ