CSS - как разместить фоновое изображение на моем фоне? - PullRequest
Новая
       18

CSS - как разместить фоновое изображение на моем фоне?

0 голосов
/ 12 июля 2020

Я хочу отображать некоторые случайные изображения дизайна на фоне моего сайта в качестве фонового изображения, проблема теперь в том, что каждый раз, когда я размещаю такое изображение, оно каким-то образом взаимодействует с соседними ящиками и т. Д. c. Я просто хочу, чтобы мои дизайнерские изображения (маленькие значки и т. Д. c) были частью фона, не соприкасаясь с другими элементами, не относящимися к дизайну, такими как текст, поля и т. Д. c.

Что-то вроде этого, я думаю : 

body {
    min-height: 100vh;
    position: relative;
    height: auto;
    width: auto;
    background-image: url("/static/pattern.jpg");
    background-repeat: repeat;
    z-index: -10;
} -> "The actual background of the site"

.design_element_01 {
    position: relative;
    z-index: -1;
    background-image: url("/static/xyz.png");
    max-width: 100px;
} -> "The design element that should get placed onto the body background from above"

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Попробуйте установить позицию design_element_01 на абсолютное НЕ относительное, а затем попробуйте разместить его, но вы хотите, используя left: right: top: bottom: z-index:

Надеюсь, это сработает!

0 голосов
/ 12 июля 2020

Попробуйте: 

.design_element_01 {
  position: absolute
  /*...*/
}

Кроме того, вам может потребоваться изменить max-width на width, поскольку background не обеспечивает ширину элемента.

Центрирование фона

Есть несколько различных подходов к центрированию фона. Я обрисую здесь один; Если это не сработает для вас, я могу описать другие.

По сути, идея состоит в том, чтобы сделать .design_element_01 элемент сам на всю страницу. Затем background-size можно использовать для ограничения размера фона , а background-position можно использовать для его центрирования. Примером basi c будет: 

.design_element_01 {
  position: absolute;
  top: 0;
  left: 0;
  background: url("/static/xyz.png");
  width: 100%;
  height: 100%;
  /* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
  background-size: 100px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

(Обратите внимание, я не тестировал это; вам может потребоваться настроить его.)

Если вы протестируете этот пример, однако вы заметите, что это центрирует фон на экране , но не обязательно на всей странице. Это может быть то, что вы хотите, а может и не быть. Если нет, вы можете изменить свойство position элемента <body>: 

body {
  position: relative;
}

Это должно привести к тому, что элемент .design_element_01 будет расположен относительно элемента <body>.

Я также создал пример JSFiddle, чтобы продемонстрировать решение: https://jsfiddle.net/mouqewzv/.

Наконец, если вы не хотите, чтобы ваш элемент полностью был центрирован, а просто смещен от центра , вы можете настроить свойства left и top элемента design_element_01 так, чтобы фон первоначально располагался в центре, а затем сместил его.

...