Фон в фоновом режиме

Я попробовал поставить фон в фоновом режиме на моем сайте. Я был в состоянии поставить цвет фона, что я хотел с этим кодом:Фон в фоновом режиме

<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, чтобы он центрироваться горизонтально на экране. Если вы не хотите иметь фиксированную ширину, добавьте padding: 0 100px на body, если вы хотите иметь 100 пикселей слева и справа от .gallery, чтобы быть бежевым.

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

Фон в фоновом режиме

ответ

Смежные вопросы