CSSで背景画像の位置を指定 その1

以下のテキストエリアの中身をコピペすると、背景画像が指定できます。

背景を上に寄せる

<div style="background-image: url(背景画像の名前); background-position: top; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

背景を下に寄せる

<div style="background-image: url(背景画像の名前); background-position: bottom; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

背景を左に寄せる

<div style="background-image: url(背景画像の名前); background-position: left; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

背景を右に寄せる

<div style="background-image: url(背景画像の名前); background-position: right; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

背景を左上に寄せる

<div style="background-image: url(背景画像の名前); background-position: left top; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

背景を左下に寄せる

<div style="background-image: url(背景画像の名前); background-position: left bottom; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

背景を右上に寄せる

<div style="background-image: url(背景画像の名前); background-position: right top; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

背景を右下に寄せる

<div style="background-image: url(背景画像の名前); background-position: right bottom; background-repeat: no-repeat;"> ここに内容を入れます。</div>

→　例を表示

素材のトップへ

スポンサードリンク

SOZAI | 素材

• 壁紙素材
  • ストライプ 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • ストライプ2-1
  • チェック模様 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 星模様 1
  • 2
  • 3
  • 4
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 水玉模様 1
  • 2
  • 3
  • 4
  • 水玉
  • 水玉反転模様 1
  • 2
  • 印象模様
  • レンガ模様 1
  • 2
  • 3
  • 4
  • 上つき模様 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • きのこ模様
  • 2
  • 魚模様
  • 2
  • 3
  • 和柄
  • 雨模様
  • 2
  • 3
  • 四角
  • 2
  • 3
  • 4
  • 丸1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 蝶々
  • 2
  • ダイア1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 旗1
  • 2
  • 雲1
  • 2
  • てるてる坊主1
  • 2
  • 浮き輪
  • スイカ
  • 団子
  • 葉っぱ
  • 傘
  • 2
  • カエル
  • 2
  • 3
  • カエルと傘
  • 長靴
  • うちわ
• ライン素材
  • その1
  • 点線
  • 星の線
  • 魚線
  • クラゲ
  • リンゴ
  • イチゴ
  • ひよこ
  • 猫
  • 猫2
  • クローバー
  • ギザギザ
  • 眼鏡
  • 四角線
  • 枯れ葉
  • キノコ
  • ハロウィンのオバケ
  • 矢印
  • もみの木
  • 熊
  • 車
  • コーヒーカップ
  • ナイフ
  • 月
  • 雲
  • ガイコツ
  • ウニ
  • UFO
  • 傘
  • ２
  • 蝶々
  • ブーツ
  • バッグ
  • 辰年
  • 雪
  • 本
  • 花
  • イチョウ
  • コウモリ
  • ひいらぎ
  • キャンドル
  • ベル（鐘）
  • 雪だるま
  • ジンジャーマンクッキー
  • 羽子板
  • リース
  • トナカイ
  • サンタクロース
  • 辰年
  • 鬼の棍棒
  • 「CHOCOLATE」
  • 「FOR YOU」
  • 「LOVE」
  • ホワイトデー
• アイコン素材
  • 防災
  • 鍵
  • 矢印
  • new
  • SALE
  • off
  • カーﾄ
  • ％
  • 相互
  • コチラ
  • リンク
  • ランキング
  • RSS
  • 音符
  • 鍵盤
  • ハート
  • メール
  • ○×
  • 拍手
  • 時計
  • 赤ちゃん
  • ふきだし
  • 顔
  • 天気
  • 動物
  • 魚
  • クラゲ
  • 文具
  • 医療
  • 工具
  • 食器
  • 携帯電話
  • 続きを読む
  • アクア風
  • 植物
  • クローバー
  • きのこ
  • 野菜
  • 食物飲物
  • あめ玉
  • アイス
  • イヤーフォン
  • コンセント
  • テレビ
  • 蛇口
  • 風船
  • マウス
  • 団扇
  • 手裏剣
  • シャボン玉
  • Tシャツ
  • ズボン
  • 拡声器
  • マイク
  • 十字
• バナー台素材
  • 花
  • シンプル
• HTML&CSS素材
  • ボックス（直線）
  • ボックス（二重線）
  • ボックス素材（ダッシュ線）
  • ボックス素材（点線）
  • ボックス素材 2
  • ボーダー素材
• HTML&CSS TIPS
  • 背景画像の指定方法 その1
  • 背景画像の指定方法 その2
  • CSSを強制上書きする
  • ちょっとの気配り〜印刷用のCSS
  • CSSで文字の左・右・中央寄せ
  • 行の高さの指定
  • idとclass
  • CSSで角丸を実現する
  • リンクを好きな色に変える
  • リンクの下線を変更する
  • 文字の間隔を指定する
  • CSSでタイトルを飾ってみる
  • 文章の１字下げを行う
  • 写真に枠線をつけてポラロイド風
  • スクロールバーをつけて省スペース化
  • CSSでマウスカーソルの見た目を変更
• HP作りの小ネタ
  • 検索エンジンに登録しよう
  • HP作成の無料スペース（お小遣い向け可能）
  • ソーシャルサービスへの対応
• 配色TIPS
  • 色見本（ウェブセーフカラー）
  • 4色ジェネレータ

その他

• 利用規約
  • 利用規約を見る