PDA

View Full Version : Webpage with two backgrounds (CSS)?



jxtreme
16 Oct 2009, 12:55 PM
How can I accomplish this? I am making a website and it has two backgrounds: one is fixed and bottom left, this is the actual background, and one is centered and bottom, this is the content box. It should look like this:

http://img205.imageshack.us/img205/7643/mockup.png

However, I have no idea how to accomplish this. Does someone know how to do this?

Right now my css is this (minus navigation bar code):


/*PARAGRAPH STLYE*/
p
{
font-family:Verdana;
font-size:20px;
text-align:center;
width:600px;
margin:0 auto;
}

/*BODY STYLE*/

body
{
background-image: url("../images/bg.png");
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
height:800px;
}

/*HEADING 1 STYLE*/
h1
{
font-size: 25px;
font-family:verdana;
text-align:center;
width:600px;
margin:0 auto;

This is my HTML (minus navigation bar code):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="language" content="en-us" />
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<center><img src="images/title.png"/></center>

<p>Welcome to my website! Here you will find some of my work.</p>

</body>
</html>

zachsformacs95
03 Jan 2010, 01:11 PM
[comment deleted]