背景背景内

我一直trynig把我的网站背景内的背景。我能够把我想要使用此代码背景色：背景背景内

<body bgcolor="#F5F2D4"> 
<div class="Gallery"> 
<h1> Gallery </h1> 
</div> 
</body>

后，在CSS我做了以下

.Gallery h1 { 
text-align: center; 
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; 
font-size: 55px; 
font-style: normal; 
font-variant: normal; 
font-weight: 500; 
line-height: 26.3999996185303px; 
background-color: White; 
}

背景会是这个样子（B =米色，W =白色：

------------------------- 
|BB|WWWWWWWWWWWWWWWWWW|BB| 
|BB|WWWWWWWWWWWWWWWWWW|BB| 
|BB|WWWWWWWWWWWWWWWWWW|BB| 
|BB|WWWWWWWWWWWWWWWWWW|BB| 
|BB|WWWWWWWWWWWWWWWWWW|BB| 
-------------------------

这让我在后台想要的颜色，但它不会缩放它只有从直到白启动浏览器的边界差异的几个像素，有没有有没有办法让距离增加？

此外，有没有办法让白色背景一直向下滚动？

非常感谢。

来源

2014-12-24 Potatothebest

显示你有什么到目前为止已经试过。一些CSS代码会有帮助。 – Aditya

嗯。你只是把背景放在不同的元素上。 – Quentin

给了html，body和.gallery全部height: 100%，使.gallery占用整个屏幕的高度。

如果你想.gallery有一个固定的宽度（如下面的例子），给它一个width，并添加margin: 0 auto有其水平中心本身在屏幕上。如果您不希望其具有固定宽度，请在body上添加padding: 0 100px，前提是您希望.gallery的左侧和右侧100个像素为米色。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-color: beige; 
 
    margin: 0; 
 
} 
 

 
.gallery { 
 
    background-color: white; 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    height: 100%; 
 
}

<div class="gallery"> 
 
</div>

来源

2014-12-24 10:17:37 ckuijjer

谢谢你的回答，它工作得很好 – Potatothebest

这种形象不是由单一的背景的：它是由具有不同背景多个元素组成：

+-----------------------+ 
|BB|YYYYYYYYY|NNNNNNN|BB| 
|BB|YYYYYYYYY|NNNNNNN|BB| 
|BB|YYYYYYYYY|NNNNNNN|BB| 
|BB|YYYYYYYYY|NNNNNNN|BB| 
|BB|YYYYYYYYY|NNNNNNN|BB| 
+-----------------------+

凡字母代表一定的颜色/背景不同。

例如，下面我用三个要素：

.all { 
 
    min-height: 100vh; 
 
    height:500px; 
 
    background-color: green; 
 
    width: 100%; 
 

 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 
.left { 
 
    height: 100%; 
 
    width: 45%; 
 
    background-color: blue; 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    left: 5%; 
 
} 
 
.right { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 45%; 
 
    background-color: red; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0; 
 
    right: 6%; 
 
}

<div class="all"> 
 

 
    <div class="left">i will always be on left. Think of me like a column!</div> 
 
    <div class="right">i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i 
 
    will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i 
 
    will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!</div> 
 
</div>

注意我使用背景颜色，但你也可以用图像/等。

来源

2014-12-24 09:41:38 jbutler483

谢谢你的回答，代码工作得很好，但它在两个蓝色和绿色部分的中间留下了一条红线，有没有办法解决这个问题？ – Potatothebest

向右元素添加-1％的左边距（**编辑答案**） – jbutler483

回答

相关问题