CSSとヘッダ画像について

| コメント(0) | トラックバック(0)
こんにちは!
今日は他のサイトのヘッダの画像も作ってみました。
そしてCSSにバックグラウンド指定で組み込むのですが
今回は組み込み方の紹介です。
まず、対応しているCSSからヘッダーの部分を探します。

div#header {
    background-image:url("http://lunch-blog.com/img/top.png");
    background-repeat: no-repeat;
    width:1000px;
    height:150px;
}
このサイトではこの部分でした。

background-image:url("http://lunch-blog.com/img/top.png");

この部分で背景にイメージファイルで
http://lunch-blog.com/img/top.png
の画像を組み込むという意味になってます。
また、これを絶対パスと言います。
相対パスにすると
/img/top.png
この様に指定しても画像は入ります。
次に
background-repeat: no-repeat;
この文章を入れます。
この文章の意味は背景画像を繰り返し表示させない(リピートさせない)
というような意味になります。この文章を入れないと背景画像が繰り替えし表示され
ちょっと表示がおかしくなります。
最後に
width:1000px;
height:150px;
これは画像の縦幅のピクセル(width)
横幅のピクセル(height)
これを指定してあげています。
あとは、元の画像によってまた違うタグを使ったりして正常に表示させるようにしてあげます。

トラックバック(0)

トラックバックURL: http://swzaob.com/mt-tb.cgi/7

コメントする

リンク

 
  • 顎関節症
  • ・噛み合わせによる症状は顎関節症.infoへお問い合わせください。
  • 港区・三田・田町のインプラント・審美の歯科
  • ・港区でインプラント及び審美の治療を提供している歯科医院です。
  • 宅配パソコン修理サービス
  • ・全国のパソコンのトラブルに対応します。
  • パソコン修理 栃木県/宇都宮市 ホームページ制作 パソコンのお医者さん
  • ・栃木県のパソコン修理ならパソコンのお医者さんにお任せ。
  • ホームページ制作 栃木県宇都宮市 ホームページ作成 デザイン・チャンネル
  • ・栃木県でホームページを作りたいならデザインチャンネル
  • 不動産 宇都宮 中古住宅
  • ・時代は中古住宅。宇都宮のエステート住宅産業さん。
  • Powered by Movable Type 5.0