1
HTML & templates / Re: CSS 100 % image resizeable
« on: June 08, 2009, 10:42:28 PM »
Thank you 
Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
Pages: 1
2
HTML & templates / CSS 100 % image resizeable
« on: June 05, 2009, 04:50:15 AM »
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
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
Pages: 1