HTML / CSS，在每一侧获得2个背景，以使用包装器进行调整 [英] HTML / CSS, getting 2 backgrounds in each side to adjust with the wrapper
本文介绍了HTML / CSS，在每一侧获得2个背景，以使用包装器进行调整的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HTML：
/ strong> < div id =bleft>< / div>
< div id =wrapper> a< / div>
< div id =bright>< / div>
CSS ：
@charsetutf-8;
header，section，footer，aside，bside，article，figure {display：block;}
* {margin：0; padding：0;}
#wrapper {
width：1400px;
margin：0 auto;
text-align：left;
position：absolute;
}
#bleft {
width：700px;
height：700px;
float：left;
background-image：url（images / pageBGLeft.jpg）;
clear：left;
}
#bright {
width：700px;
height：700px;
float：right;
background-image：url（images / pageBGRight.jpg）;
clear：right;
}
不强制正确的背景，而是显示一行包装
解决方案
该网站看起来像2个背景在2个容器上工作，像这样：
< body>
< div id =A>
< div id =B>
< div id =wrapper>< / div>
< / div>
< / div>
< / body>
then css：
#A {
background：url（...）top right no-repeat;
}
#B {
background：url（...）top left no-repeat;
}
#wrapper {
width：700px;
margin：0 auto;
}
im trying to have 2 seperate backgrounds on my website, one in each side, that adjust acording to screen size
like on ownedcore.com where the sides adjust with the mid wrapper
HTML:
<div id="bleft"></div>
<div id="wrapper">a</div>
<div id="bright"></div>
CSS:
@charset "utf-8";
header, section, footer, aside, bside, article, figure {display: block;}
* {margin: 0; padding: 0;}
#wrapper {
width: 1400px;
margin: 0 auto;
text-align: left;
position: absolute;
}
#bleft {
width: 700px;
height: 700px;
float: left;
background-image: url(images/pageBGLeft.jpg);
clear: left;
}
#bright {
width: 700px;
height: 700px;
float: right;
background-image: url(images/pageBGRight.jpg);
clear: right;
}
Does not force the right background right, but displays the one line wrapper
解决方案
That site looks like it works with 2 backgrounds on 2 containers like this:
<body>
<div id="A">
<div id="B">
<div id="wrapper"></div>
</div>
</div>
</body>
then css:
#A {
background: url(...) top right no-repeat;
}
#B {
background: url(...) top left no-repeat;
}
#wrapper {
width: 700px;
margin: 0 auto;
}
这篇关于HTML / CSS，在每一侧获得2个背景，以使用包装器进行调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
