枠の中の背景に画像を使いたい!

枠の中に背景画像を設定するスタイルシートチップス。

スポンサーリンク


今回のお題「枠の中の背景に画像を表示させたい!」

背景は風と樹と空とフリー素材さんのものを使わせていただきます。

参考記事: ファンブログでアップロードした画像の場所(画像URLの調べ方)

枠の中にも書きましたが、背景は風と樹と空とフリー素材さんのものを使わせていただきます。素敵な素材ですね。

ではいきなり、上のソースです。

なお、このページの実際のソースでは自動改行を排除するため、下のコードを改行せずに書いています。詳しくはブログの自動改行問題をご覧ください。

<div style=”border:3px solid #0000ff;padding:1em;height:177px;background:url(‘/dwm/wp-content/uploads/2013/08/12_1.gif’) no-repeat left top;text-align:right“>
<div style=”margin-top:12.5em”>
<span style=”color:#0000ff;font-weight:bold”>今回のお題「枠の中の背景に画像を表示させたい!」</span>
背景は<a href=”http://kaze-sora.com/” title=”風と樹と空とフリー素材” target=”_blank”>風と樹と空とフリー素材</a>さんのものを使わせていただきます。
</div>
</div>

チョー見づらいので赤い部分を分けます。

border:3px solid #0000ff;
padding:1em;
height:177px;
background:url(‘画像ファイルのURL’) no-repeat left top;
text-align:right;

borderとpaddingはもう説明しました。新しいのは、height、text-align、それからbackgroundの右側ですね。

枠の高さと横幅

まず、height:177px

これは使わせていただいている画像の高さが177px(ピクセル)なので、それに合わせます。合わせないとどうなるか、やってみます。

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

む!特に問題なく見える。さっきは画像より枠が大きくて、上に白い余白が出てたんですけどね。まあ、いいか。もし困った時は画像のサイズに合わせてみてください。

本当は、高さだけでなくwidth(横幅)も指定したいんですが、このブログでは設定できませんでした。(書いても効かない)

今回の画像は右側が白いのでわかりませんが、実はこの画像左に寄っています。だからもし画像の色が白くなかったら、画像の横幅が終わったところで、ブッツリと色が変わります。ファンブログで背景画像を使う場合は、そういった条件も加味して素材を選んだほうが苦労しません。たぶん。

ただこれはサーバの問題ではなくスキンの問題ですね。スキンのCSSを正しくいじれば効くようになるでしょう。だから、他のスキンを使っている方はwidthの指定が有効かもしれません。

続いて、background:url(‘画像ファイルのURL’) no-repeat left top;これは

url()のかっこの中の画像を
枠の左上合わせ(left top)
繰り返さず(no-repeat)に表示して

という意味です。

画像の位置指定

位置の指定はtopとbottom(上か下)
leftとright(左か右)
で指示します。

右上あわせ background:url(‘画像ファイルのURL’) no-repeat right top;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

左下あわせ background:url(‘画像ファイルのURL’) no-repeat left bottom;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

画像の繰り返し

repeat 繰り返す
no-repeat 繰り返さない
これは下の表示を見れば説明はいらないでしょう。


←元の画像

繰り返す background:url(‘画像ファイルのURL’) repeat left top;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

繰り返さない background:url(‘画像ファイルのURL’) no-repeat left top;

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

文字位置の指定

今日の記事は次の、ext-align でおしまいです。

画像に合わせて、文字の位置をずらしたい時があります。今回は、右寄せ、左寄せ、真ん中合わせの方法。上下の配置はやりません。

文字の右寄せ text-align:right

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

文字の左寄せ text-align:left

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。

文字の真ん中合わせ text-align:center

今回のお題「枠の中の背景に画像を表示させたい!」
背景は風と樹と空とフリー素材さんのものを使わせていただきます。


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください