I've been searching everywhere for a solution to this issue. I have a design that I'm attempting to code using divs and CSS. The top half of the image features a gradient that transitions from left to right with different colors. My struggle lies in aligning the image so that it is centered, yet part of it is hidden beneath the background.
(http://pretty-senshi.com/final-final.html) <-- check out a preview of the current design
<-- view the original design
<-- background gradient that needs to repeat on the X-Axis only.
<html> <LINK href="style.css" type=text/css rel=stylesheet> </head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container"><div id="rightHalf">
</div><center><img src="images/Final-Final_02.png" id="picture"></center>
<div id="header2">
</div>
</div>
</div></div>
The corresponding CSS:
@charset "UTF-8";
/* CSS Document */
body {background: url(images/final-final_01.png);
background-repeat:repeat-x;}
div#container {
width:100%;}
picture {z-index: 999;}
#rightHalf {
background: url(images/final-final_03.png);
background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: 1;
}