[CSS]背景画像を半々に表示するスタイルシート

Post on:2008年4月4日

bodyとdivの場合

<textarea name="code" class="html" cols="60" rows="5">
&lt;body&gt;
&lt;div&nbsp;id=&quot;rightHalf&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
</textarea>

<body>

<div id="rightHalf"></div>

</body>

</textarea>

<textarea name="code" class="css" cols="60" rows="5">
*{margin:0;padding:0;}
html{overflow-y: scroll;}
body{background:url(images/bg-1.jpg);}
#rightHalf{
	background:url(images/bg-2.jpg);
	width:50%;
	position:absolute;
	right:0px;
	height:100%;
}
</textarea>

*{margin:0;padding:0;}

html{overflow-y: scroll;}

body{background:url(images/bg-1.jpg);}

#rightHalf{

background:url(images/bg-2.jpg);

width:50%;

position:absolute;

right:0px;

height:100%;

}

</textarea>

divとdivの場合

<textarea name="code" class="html" cols="60" rows="5">
&lt;body&gt;
&lt;div&nbsp;id=&quot;leftHalf&quot;&gt;&lt;/div&gt;
&lt;div&nbsp;id=&quot;rightHalf&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
</textarea>

<body>

<div id="leftHalf"></div>

<div id="rightHalf"></div>

</body>

</textarea>

<textarea name="code" class="css" cols="60" rows="5">
#leftHalf{
	background:url(images/bg-1.jpg);
	width:50%;
	position:absolute;
	left:0px;
	height:100%;
}
#rightHalf {
	background:url(images/bg-2.jpg);
	width:50%;
	position:absolute;
	right:0px;
	height:100%;
}
</textarea>