css начать повторять фон с определенной позиции - PullRequest
Новая
       20

css начать повторять фон с определенной позиции

7 голосов
/ 09 апреля 2011 
#container{
    background:url(images/bg-main.png) repeat-y;
    width: 903px; 
    background-position: 0px 687px;
    background-position: bottom;
    height: 1200px;
    margin-left: auto;
    margin-right: auto;
    }   
#content{
    background:url(images/bg-wood.png) repeat-y;
    width: 903px; 
    height: 678px;
    margin-left: auto;
    margin-right: auto;
    }

#content div находится внутри #container div.Я хочу, чтобы фон #container начал повторяться с 687 пикселей сверху.Возможно ли это?

РЕДАКТИРОВАТЬ: Возможно ли, что первые x пикселей div (сверху) имеют пространство emtpy, а после x пикселей начинается backgrund?

Ответы [ 3 ]

7 голосов
/ 09 апреля 2011

Насколько я знаю, невозможно, как вы пытаетесь это сделать, repeat-x и repeat-y, будут повторять изображение в обоих направлениях вдоль оси

, если вы повторите фон контейнера полностьюдлина, неужели фоновое изображение содержимого не покрывает первые 678 пикселей?

2 голосов
/ 21 сентября 2016

Этого можно добиться с помощью псевдоэлемента (::before или ::after) и использовать calc() для смещения.

Псевдоэлемент даст вам больше контроля и не повлияет на содержимое, и для него не требуется дополнительный тег HTML.

Вот базовый пример со смещением 100px от вершины: 

.background {
  height: 300px;
  border:1px solid;
  position: relative;
}

.background::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: calc(100% - 100px);
  width: 100%;
  display: block;
  box-sizing: border-box;
  background: url(//placehold.it/100x100);
}
<div class="background"></div>

Вы также можете использовать ту же технику для смещения слева: 

.background {
  height: 300px;
  border:1px solid;
  position: relative;
}

.background::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: calc(100% - 100px);
  display: block;
  box-sizing: border-box;
  background: url(//placehold.it/100x100);
}
<div class="background"></div>

Или даже в обоих направлениях (тоже наоборот!): 

.background {
  height: 300px;
  border:1px solid;
  position: relative;
}

.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 100px);
  width: calc(100% - 100px);
  display: block;
  box-sizing: border-box;
  background: url(//placehold.it/100x100);
}
<div class="background"></div>
1 голос
/ 09 апреля 2011 
background : url('image path') 0px 287px repeat-y;

Это будет повторять по вертикали ваше фоновое изображение с высоты 287 пикселей сверху.

, но другой способ - установить это для вашего содержимого div: 

margin-top:287px;

, ваше лучшее решение -делай так: 

#container{
    position:relative;
    }


#background{
    background:url('image url');
    position:absolute;
    top:287px;
    left:0px;
    z-index:100;
    }  

#content{
    position:absolute;
    top:0px;
    left:0px;
    z-index:99999;
    }
...