CSS Background - How would you do this?
I really need some help with a background on a website. You can see the image here:
Link to image
Now what i want is first of all to have the image p开发者_开发百科laced in the top middle. Then i would like to have something like 10x250px (Width x Height) from the left of the image to be repeated - should a visitors screen resolution be wider than the image it won't seem like the site just stops at the edges.
I've tried several things, but it seems i keep running into different kind of technicalities that I'm not sure how to get around. So I would like to know how you would do it?
(The websites content will be 990px wide if that helps)
But the repeating image on your <body>, and put the other image background on your wrapper <div> (or similar).
Alternatively, you can use CSS3 for multiple background images on the same element. Won't be as compatible though.
Here is a way to accomplish this so that it attempts to center for all screen resolutions so that there is never a bottom scrollbar. bg.gif is your image ang bg_filler.gif is a 20px slice off of the side.
<style>
body
{
background-image: url(bg_filler.gif);
background-repeat: repeat-x;
background-color: #D1CDCA;
margin: 0px;
}
.backgroundPart
{
height: 300px;
background-image : url(bg.gif);
background-position: top center;
background-repeat: no-repeat;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div class="backgroundPart">
</div>
</body>
Here is a sample http://www.wesgrant.com/samples/BackgroundSample/default.html
Something like this style:
<style>
body{
margin:0;
padding:0;
background-image:'repeating_image...';
background-repeat:repeat-x;
}
#wrapper {
width:990px;
background-image:url(http://img852.imageshack.us/img852/4169/testbg01.jpg);
}
</style>
You would want to create two images, one for the body to repeat, and the other being the header that you already have. here is your image in a demo. take a look at the source code to see how this works
http://luistovar.com/sodemo
No matter how large the screen resolution is now, the bg repeats. Good luck
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
* {padding:0px; margin:0px;}
body {
background-image: url(repeat.jpg);
background-repeat:repeat-x;
background-position:top;
}
#header {
background-image: url(header.jpg);
background-repeat:no-repeat;
width:1600px;
height:252px;
margin:0px 0px 0px 0px;
}
-->
</style>
</head>
<body>
<center>
<div id="header"></div>
</center>
</body>
</html>
加载中,请稍侯......
精彩评论