Исправлено прикрепление фона CSS + фиксированная ширина размера фона

Я пытаюсь добавить «полосу» изображения в левую верхнюю часть div в качестве фона с фиксированным свойством вложения. Вот он: https://jsfiddle.net/mvfariajr/recLr6yf/

HTML:

<div id="wrapper">
  <div id="container">
    <h1>TESTING</h1>
  </div>
</div>

CSS:

#wrapper {
  width: 100%;
  height: 500px;
  background-color: #ccc;
}

#container {
  text-align: center;
  margin: 0 auto;
  width: 80%;
  height: 400px;
  background-color: #fff;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 70px 100%;
  background-attachment: fixed;
  background-image: url(http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg);
}

Проблема в том, что фон не всегда находится слева от div.

Любая помощь? Спасибо!


html css background-image css-position
person Marcio    schedule 08.02.2017    source источник
comment
вы пытаетесь просто запустить изображение слева сверху вниз без повторения   -  person muratkh    schedule 08.02.2017
comment
Да, но с фиксированным имуществом.   -  person Marcio    schedule 08.02.2017
comment
@MichaelCoker Нет никакой разницы между вашим результатом и моим. Я пытаюсь иметь фиксированное свойство вложения + фиксированную ширину 70 пикселей с верхним левым позиционированием.   -  person Marcio    schedule 09.02.2017
comment
@Marcio, извините, я внес изменения в инструменты разработчика и не обновил скрипку! jsfiddle.net/recLr6yf/3   -  person Michael Coker    schedule 09.02.2017
comment
Это не совсем работает на моем сайте до сих пор. Проверьте это: ariseartgroup.com/interiors/about   -  person Marcio    schedule 09.02.2017

Ответы (1)


arrow_upward
2
arrow_downward

Ну вот:

#wrapper {
  width: 100%;
  height: 500px;
  background-color: #ccc;
}

#container {
  text-align: center;
  margin: 0 auto;
  width: 80%;
  height: 400px;
  background:white url("http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg") 10% 50% no-repeat;
  background-size: 70px 100%;
  background-attachment: fixed;
}
<div id="wrapper">
  <div id="container">
    <h1>TESTING</h1>
  </div>
</div>

person tao    schedule 08.02.2017
comment
Я хочу иметь background-attachment: исправлено - person Marcio; 09.02.2017
comment
Хорошо, извините, я пропустил это. В этом случае вам нужно установить background-position относительно width. Обновил ответ. - person tao; 09.02.2017
comment
@Marcio это то, что вы хотите? - person tao; 09.02.2017
comment
Да спасибо! Но по какой-то причине он все еще не работает должным образом на моем сайте. ariseartgroup.com/interiors/about внутри div.metal-left - person Marcio; 09.02.2017
comment
fixed означает относительно области просмотра. Вероятно, вы захотите попробовать background-position: calc((100vw - 1097px) / 2) 50% — 1097px получается из 1080px ширины контейнера и 17px полосы прокрутки в Chrome и Firefox. Но вы действительно не хотите идти по этому пути. Потому что устройство с тонкой полосой прокрутки будет выглядеть плохо. Гораздо безопаснее использовать pseudo-element в контейнере div с position:absolute; и width: 70px. Вы можете повторить свой фон, и он всегда будет отображаться правильно, если вы настроите его на повторение. - person tao; 09.02.2017
comment
Я пытался использовать :before prior, но на самом деле это не имело никакого значения, потому что я не хочу, чтобы изображение повторялось, поскольку это не шаблон. Враги, которые заставляют послать? Вы говорите установить ширину 70 пикселей и установить повтор, но на самом деле он не будет повторяться? - person Marcio; 09.02.2017
comment
То, что вы говорите, имеет смысл, но я думаю, что это было бы лучшим кросс-браузерным решением. Это изображение можно легко заставить повторяться в направлении x, не будучи заметным, тем более что вы используете его только в полосе 70px. - person tao; 09.02.2017
comment
Изображение на самом деле не шаблон. Но я попробую, чтобы посмотреть, как это выглядит VS calc в фоновом положении. Большое спасибо! - person Marcio; 09.02.2017