背景画像を指定したあとにスタイルシートで指定した画像を使用することはできますか？

質問

タイトルどおりの質問なのですが、背景に使いたい画像を表示させたあとにスタイルシートを使って違う画像を背景画像の上に表示させることはできますでしょうか。
やろうとしていることは、背景画像を表示させたあとにスタイルシートを使って違う画像をウインドウの右端に表示させたいです。
よろしくお願いします。

回答No.3

noname#22222 · ベストアンサー

s_husky です。

そのものズバリではありませんが、参考にはなると思います。
スタイルシートでの分割サンプルコードは、ゴロゴロしています。
それらを参照しながら、応用して下さい。

/* ==========================================================================================================
mystyle.css: Last update 2005/10/05 By XXXXXXXXXXXXXXXXXXXXXXX
------------------------------------------------------------------------------------------------------------- */
@charset "Shift_JIS"; /* この外部 CSS の文字コードを「Shift JIS」に設定 */

/* ==========================================================================================================
全体構造
------------------------------------------------------------------------------------------------------------- */
body {
margin: 0; /* 余白をゼロに */
padding: 0;
font-size: 10pt;
text-align: center; /* Win IE 6 で、ブロックレベル要素がセンタリングされないのを防ぐため */
}

/* ==========================================================================================================
ヘッダ
------------------------------------------------------------------------------------------------------------- */
div#header {
width: 820px;
background: url('../images/toppage/background_header.gif') no-repeat bottom;
}

/* ==========================================================================================================
メイン・コンテンツ
------------------------------------------------------------------------------------------------------------- */
div#container {
width: 820px;
margin-left: auto;
margin-right: auto;
background: rgb(170, 170, 170) url('../images/toppage/background_container.gif') repeat-y;
text-align: left;
}

div#wrapper {
float: left;
width: 80%;
}

div#content {
float: right;
width: 70%;
}

div#sidebarA {
color: white;
float: left;
width: 30%;
text-align: left;
}

div#sidebarB {
float: right;
width: 20%;
}

/* ==========================================================================================================
フッタ
------------------------------------------------------------------------------------------------------------- */
div#footer {
clear: both;
width: 820px;
font-size: 8pt;
margin-left: auto;
margin-right: auto;
background: url('../images/toppage/background_footer.gif') no-repeat top;
}

お礼

回答ありがとうございます。
わざわざソース書き込んでいただいて本当にありがとうございます。他のサイトと見ながらようやく解決することができました。

回答No.2

nitto3

背景を透過させ見せないなら普通に画像を貼ればいいです。
背景が無い場合と同じです。

お礼

回答ありがとうございました。スタイルシートで指定した背景画像を表示したうえでスタイルシートで指定した画像を貼り付けたい、という質問でした。わかりずらくてすいませんでした。

回答No.1

noname#22222

+--------------+=====+
+--------------+=====+
+--------------+=====+
+--------------+=====+
+--------------+=====+
+--------------+=====+
+--------------+=====+
+--------------+=====+
+--------------+=====+
+--------------+=====+
このような感じですと、２ブロックに分ければ宜しいかと！

補足

回答ありがとうございます。２ブロックにわけるとはどのように書けばよろしいのでしょうか。もしよろしければ教えてください。