it-swarm.com.ru

Как добавить два фоновых изображения - слева и справа от центрального столбца

У меня есть этот CSS:

#wrapper1 {
min-width:1020px;
min-height:100%;
}
#wrapper2 {
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat;
}
#wrapper3 {
width:1020px;
margin:0 auto;
}

и этот HTML:

<div id="wrapper1">
 <div id="wrapper2">
   <div id="wrapper3" class="clearfix" <!-- content here -->
        <p>blah blah blah</p>
   </div>
 </div>
</div>

Мне нужно добавить 2 изображения - слева и справа от центрального столбца без изменений ширины центрального столбца и чтобы изображения не влияли на общую ширину страницы . Пример:

Example Image

Я могу добавить изображения, и сделал несколько попыток

  1. когда я пытаюсь изменить ширину браузера - фоновые изображения идут под центральным столбцом Image

  2. Я попытался изменить min-width:1020px; to min-width:1665px; - на первый взгляд все хорошо, но для разрешения экрана - менее 1665px весь контент смещен вправо Я попробовал несколько вариантов, но безуспешно

Мой вопрос: могу ли я разместить изображение так, чтобы при изменении ширины браузера уменьшать расстояние слева и справа от центрального столбца (это поведение по умолчанию, если нет фоновых изображений)

Вот код с примерами изображений.

Если я сделаю 1 большое изображение с пустой центральной частью 1020px и вставлю в него левое/правое изображение ... это будет работать?

8
Vasiliy Terkin

Вы можете следовать нескольким решениям:

1) Используйте div: [good]

Создание хорошей "структуры" div'ов может решить вашу проблему, например что-то вроде этого:

<div id="allWrapper">
 <div id="leftSidebar"></div>
 <div id="centerOrContent"></div>
 <div id="rightSidebar"></div>
</div>

И псевдокод CSS (не тестировался):

div#allWrapper{
 width: 100%;
 heigt: 100%;
}
div#leftSidebar{
 min-width: [theWidthOfLeftImage] px;
 height: 100%;
 background-image: url(leftImage.jpg);
 backround-position: center right;
}
etc...

Затем играя с CSS (плавающие и размеры) вы можете настроить вид. 

2) Используйте несколько фонов: [не всегда хорошо]

Вы можете использовать этот псевдокод CSS для использования нескольких фонов (можно найти здесь: http://www.css3.info/preview/multiple-backgrounds/ )

div#example1 {
width: 500px;
height: 250px;
background-image: url(oneBackground), url(anotherBackground);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

3) использовать статическое "большое" изображение: [ленивое решение]

Использование статического изображения, как вы предлагаете (с пробелом в середине), также может решить проблему, но если веб-сайт «отзывчив», у вас могут возникнуть проблемы с графикой с другим разрешением экрана (или изменением размера окна браузера) . В в этом случае вы также должны зафиксировать положение и ширину центрального столбца (при изменении размера окна).

4) использовать адаптивный дизайн: [отлично - сделай это!]

Чтобы избежать наложения изображений на центральный (контентный) блок, вы можете установить цвет фона (этого блока) как белый. 

Опять же, чтобы избежать наложения, вы можете установить «специальный» адаптивный CSS. Это обнаруживает, если окна имеют ширину <X, 2 изображения исчезают. Например, с этим псевдокодом CSS:

@media only screen and (min-width: 481px) {
//here happens something when the screen size is >= 481px
 div#example {
   background-image: url(oneBackground);
 }
}

@media only screen and (max-width: 481px) {
//here happens something when the screen size is <= 481px
 div#example {
   background-image: none;
 }
}

Вот некоторые ссылки, найденные в Интернете о адаптивном дизайне:

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

18
damoiser

Вы можете использовать два абсолютных DIV с двумя фонами. Один левый центр, а другой правый:

Разместите DIVs, где вы хотите на сайте. (они абсолютно позиционированы)

HTML:

<div class="background" id="background1"></div>
<div class="background" id="background2"></div>

CSS:

.background{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

#background1{
    background: url(yourImage1.jpg) no-repeat 100% 0;
}

#background2{
    background: url(yourImage2.jpg) no-repeat 0 0;
}
3
Alvaro

Это рабочий код для меня. единственное, что будет изменено, это background-position для обоих свойств. 

.image-bg-custom1 {
    background-image: url(/images/left-get.png);
    background-repeat: no-repeat;
    background-position: center left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.image-bg-custom2 {
    background-image: url(/images/right-get.png);
    background-repeat: no-repeat;
    background-position: center right;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
0
iFart