Hi all,
I am newbie with CSS.
I have been asked by my friends to replace the blue background on the left and right handside of this website:
http://discoverytravel.com.au/He asked me to put blue faded image on each side.
I am thinking to put one big image with the blue faded on the side.
I have use this code to replace the background on my testing file:
<html>
<head>
<style>
html, body {margin:0; padding:0; width:100%; height:100%; }
#background{position:absolute; z-index:1; width:100%; height:100%;}
</style>
</head>
<body>
<img id="background" src="wall1.jpg" alt="" title="" />
<p> testing</p>
</body>
</html>
Those code works, but when I put that code to the actual website, somehow the image background showed up on the left hand side.
Some css code of the actual website
{
margin:0px;
padding:0px;
}
/* put the code on the body*/
body {
margin:0; padding:0;
background-image: url("../image/wall1.jpg");
position:absolute; z-index:1; width:100%; height:100%;
font-family: Georgia, Times, serif;
}
#screen0{
width:960px;
background-color:#FFFFFF;
margin:0 auto;
}
#screen {
width:940px;
margin:0 auto 0px;
background-image:url(../image/wall.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
}
#screen2 {
width:920px;
margin:0 auto;
}
Some code on html website:
<head>
<!-- InstanceEndEditable --><link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="screen0">
<div id="screen">
<div id="logo">
<ul>
<li><a href="about/index.html">about us</a></li>|
<li><a href="contact/index.html">contact us</a></li>|
<li><a href="newsletter/newsletter.html">email news letter</a></li>
</ul>
</div>
<div id="screen2"><!-- InstanceBeginEditable name="EditRegion1" -->
<div id="main">
<p id="photo">
.......
Could you please advise what should I do to maintain the same layout and only changing the background with resizeable image?
Any website reference that I can take a look. Thank you
