CSS Dynamic Left/Right column Static Width
The problem is, i have a background in two parts.
Background Image #1
Background Image Repeats (endlessly) #1
Background Image #2
Background Image Repeats (endlessly) #2
In css you cant create a background by just sticking elements on it like so:
#leftColumn {
background-image:url('http://i53.tinypic.com/2ezlb7n.png');
background-repeat:no-repeat;
background-position:right top;
background-z-index:1;
background-image:url('repeat.png');
background-repeat:repeat-x;
background-z-index:0;
}
What I want the result to be:
[ BACKGROUND LEFT ]
[ CONTENT ]
[ BACKGROUND RIGHT ]
The content should always be 768px. The background on both sides should show as much as possible.
I can't believe it, but i was able to solve it myself. This is the code that made it possible:
<style type="text/css">
* {
padding:0px;
margin:0px;
}
html, body {
width:100%;
height:100%;
background-color:#333333;
}
#leftColumn {
background-image:url('http://i54.tinypic.com/aa83lw.png');
开发者_JAVA技巧 background-repeat:repeat-x;
display:none;
}
#rightColumn {
background-image:url('http://i52.tinypic.com/kcjdwi.png');
background-repeat:repeat-x;
display:none;
}
#leftImage {
background-image:url('http://i53.tinypic.com/2ezlb7n.png');
background-repeat:no-repeat;
background-position:right;
width:100%;
height:128px;
}
#rightImage {
background-image:url('http://i56.tinypic.com/noh6on.png');
background-repeat:no-repeat;
width:100%;
height:128px;
}
#content {
width:768px;
background-color:#666666;
}
@media only screen and (min-width:769px) {
#leftColumn, #rightColumn {
display:table-cell;
}
}
</style>
<table width="100%" height="100%">
<tr>
<td id="leftColumn" align="right"><div id="leftImage"></div></td>
<td id="content"> </td>
<td id="rightColumn" align="left"><div id="rightImage"></div></td>
</tr>
</table>
I think you're wanting to have a content area in the center with a background that spans the width no matter how wide it runs.
The HTML:
<div id="wrapper">
<div id="content">your center content goes here</div>
</div><!-- close wrapper -->
The CSS:
#wrapper {
background: #FFF url(/images/widebackground) repeat-x center top;
}
#content {
margin: 0 auto; /*centers div - change the 0 if you want a different top margin*/
width: 768px;
}
This will repeat your background horizontally. It will be centered in the window. If your image is wide enough (4000px, maybe?) you're unlikely to see it repeat on any display without several monitors. You can also set a color for any areas not covered vertically, or visible through transparent areas. I set this to #FFF, but you can choose your color or leave it out.
Here's a jsfiddle demonstrating what I am suggesting. I changed a few things (colors, content size) to make it more visible, but the key parts are still there.
This will do it in ff, but does not work in Chrome, sarafi or IE.
So is probably no good for you!! :)
<html>
<head>
<style>
body
{
display:table;
width:100%;
padding:0px;
margin:0px;
}
.centre
{
display:table-cell;
height:400px;
width:768px;
text-align:left;
margin:0px auto;
position:relative;
background-color:#FF0000;
}
.left
{
display:table-cell;
background-color:#00FF00;
}
.right
{
display:table-cell;
background-color:#0000FF;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="centre">
<p>This is the centre content</p>
</div>
<div class="right"></div>
</body>
</html>
加载中,请稍侯......
精彩评论