背景背景內

我一直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

回答

相關問題