What I did was I sliced the seperate images and integrated them using CSS.
For example, With a background image
Then just use
For alignment purposes.
Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.
Width is explanatory, as is height.
now for the HTML.
The <div></div> tags define the part of the website you are going to call in the CSS.
For example
What we did was call the section using #name of div. And then aligned it using the Left, Top, Width, and Height attributes. You can find a list and examples of attributes
Here
Now, combining.
What we did here was use CSS to align the content box, and to make the text italicized. We also called a background using CSS.
For example, With a background image
Code:
body
{
background-image:url('http://wwwurltobackground.png');
background-repeat:repeat x,y;Then just use
Code:
position:absolute;
left: ;
top: ;
width: ;
height: ;Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.
Width is explanatory, as is height.
now for the HTML.
Code:
<div id="insert section name">Content</div>For example
Code:
#insert section name{
background-image:url('http://www.contentimage.com/contentbackground.png');
position:absolute;
left: 350;
top: 130;
width: 676;
height: 458;Here
Now, combining.
main.css (Click to View)
index.html (Click to View)