Hi, i have a background image on my body tag, and if i put margin on my body tag, it lowers all the content by 20px, but not the background image, how can i move this down my 20 px also, thanks.Just edit the image in photoshop by setting the canvas size 20px taller. Make sure it adds the excess to the top.ya man, i already knew that, which is what i had to do, however this solution poses 2 problems... i just increased the image size, which is bad for loading, and CSS SHOULD be able to handle this...body {
background-image: url(image.jpg);
background-position: 0px 20px;
}Give this a shot, it should work:
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background-image: url(image.gif);
}
#topPad {
padding: 5px;
background-color: #FFFFFF;
}
#mainContent {
color: #FFFFFF
}
</style>
</head>
<body>
<div id="topPad"> </div>
<div id="mainContent">
Content Here
</div>
</body>
</html>i just increased the image size, which is bad for loading,
A 20px solid color strip should add almost zero to the image size. How big were the two images?
and CSS SHOULD be able to handle this...
It will but you have to do it with the background, not its container.
background-image: url(image.jpg);
background-position: 0px 20px;
}Give this a shot, it should work:
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background-image: url(image.gif);
}
#topPad {
padding: 5px;
background-color: #FFFFFF;
}
#mainContent {
color: #FFFFFF
}
</style>
</head>
<body>
<div id="topPad"> </div>
<div id="mainContent">
Content Here
</div>
</body>
</html>i just increased the image size, which is bad for loading,
A 20px solid color strip should add almost zero to the image size. How big were the two images?
and CSS SHOULD be able to handle this...
It will but you have to do it with the background, not its container.