Как сделать задний фон статическим в html

Фоновое изображение и неподвижный фиксированный CSS фон

В этом уроке мы продолжаем рассматривать свойства фона.

Пример того, как зафиксировать фоновое изображение в нужном месте:

Текст документа Текст документа Текст документа Текст документа

По умолчанию фоновое изображение прокручивается вместе с другими элементами страницы.

background-attachment:fixed фиксирует фоновое изображение в заданной позиции.

background-position: задает точные координаты фона по горизонтали и по вертикали.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS позиция фона Как зафиксировать фон Фиксированный CSS margin

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Неподвижный фон в CSS? – Не вопрос!

background-attachment

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

Синтаксис

background-attachment: fixed | scroll | inherit

background-attachment: fixed | scroll | local[, fixed | scroll | local]*

Значения

fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

HTML5 CSS2.1 IE Cr Op Sa Fx

        
Пример текста
  

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundAttachment

Браузеры

В браузере Internet Explorer 6 значение fixed работает только для тегов или .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Chrome поддерживает значение local с версии 4.0.

Safari поддерживает значение local с версии 5.0.

Firefox не понимает значение local .

CSS по теме

Как сделать статический фон?

У меня есть 2 холста, 1й — Overlay (статический фон), 2й — World Space (остальные объекты), ко второму соответственно прикреплена камера и её можно двигать и приближать/удалять, ну а фон при этом статический, вот только одна проблема — этот фон поверх всего остального получается, и в иерархии местами менял и Z ось двигал и слои менял, все равно поверх получается, как его правильно сделать?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать фон черным?
Как сделать фон,тоесть пространство вокруг обьекта полностью черным?Нужно чтобы не было не.

Как сделать непрозрачным фон меню ?
Во время паузы вывожу меню с кнопками , которое по идее закрывает игровые объекты. Но через него.

Как сделать возможность поменять задний фон в игре?
Добрый день, Возникла такая задача: Пользователь может менять задний фон игры. Моя игра 2д. Мне.

Как сделать бесконечный фон, чтобы при переходе в правый или левый угол оставался тот же фон?
Как сделать бесконечный фон, чтобы при переходе в правый или левый угол оставался тот же фон?:(

гуглю вместо тебя
236 / 154 / 87
Регистрация: 20.05.2021
Сообщений: 429

Сообщение было отмечено Nebiros как решение

Решение

Nebiros,

Сообщение от Nebiros

1й — Overlay (статический фон)

Добавлено через 1 минуту
Nebiros, попробуй сделать Camera
«Screen Space — Overlay (пространство экрана — поверх)
В этом режиме холст масштабируется для заполнения всего экрана, а затем рисуется напрямую, не ссылаясь на сцену или камеру (интерфейс написуется даже если в сцене вообще нет камеры). Если размер или разрешение экрана меняются, интерфейс автоматически перемасштабируется. Интерфейс рисуется поверх любой другой графики, такой как вид из камеры.»

Screen Space — Camera (пространство экрана — камера)
В этом режиме, холст отображается как если бы он был нарисован на плоском объекте, на некотором расстоянии заданной камеры. Экранный размер интерфейса не меняется с расстоянием, т.к. он всегда масштабируется чтобы в точности заполнять пирамиду видимости камеры (camera frustum). Если размер или разрешение экрана, или пирамида видимости, изменяются – интерфейс автоматически перемасштабируется, чтобы помещаться. Любые 3д объекты сцены, расположенные ближе к камере, чем плоскость интерфейса, будут отрисованы “над” интерфейсов, в то время как остальные объекты, находящиеся за плоскостью, будут загорожены.

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как сделать статический URL страниц?
Сайт blin.in — ситуация следующая: По каким бы новостям я не ходил — в браузере все равно.

Как сделать из динамического GUID, статический?
Необходимо создать любой GUID и управлять им как статическим? Сохранение созданного после закрытия.

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Как сделать на D-триггере вход из динамического в статический
Подскажите пожалуйста, как преобразовать вход clock на D-триггере из входа с положительным фронтом.

Как сделать статический нат на определённый сервер ?
Настроил я сеть, все пк с серверами пингуються. Как сделать так, что бы пакет который приходит.

Как грамотно вписать фон в header?

Зависит от фона и шапки. Разный рисунок фона будет по смыслу по-разному подстраиваться. Приведите пример здесь.

– user347472
1 янв 2021 в 14:21

@PavelGrishaev фон(2000×1034) как раз таки размером с header, на psd макете. Но мой монитор только 1920×1080 и появляется скроллбар. imgur.com/a/XYQVA11

2 янв 2021 в 10:18

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Чтобы размер элемента подстраивался под экран следует указывать его ширину в % и высоту в vh (высота экрана, 100vh соответствует высоте равную высоте экрана пользователя). Например, для того, чтобы элемент занимал всю ширину и высоту экрана пользователя не зависимо от разрешения, следует прописать для такого элемента следующие значения: width:100%; height: 100vh; . Фон для элемента можно задать с помощью свойства background-image: url(здесь пишем адрес картинки которая нам нужна) для того, чтобы картинка занимала весь элемент следует прописать свойство background-size: contain .

Если у вас изображение не должно занимать полностью весь элемент, но вам нужно ее расположить, скажем по центру, для этого, следует сначала убрать свойство background-size: contain и отрегулировать положение изображения в свойстве bzckground-position: center , в данном случае изображение будет располагаться по центру элемента.

Также, если хотите лучше контролировать поведение элементов на странице при разном разрешении экрана можно это сделать при помощи:

@media (max-width:700px) and (min-width:481px) < body< background-color: #000; >/* ещё какие-то стили. */ > 

В этом случае будут применены стили, которые находятся внутри @media , только тогда, когда ширина экрана больше 481px и меньше 700px . Если надо задать только одну границу(например для любой ширины экрана от 480px и меньше, то это можно сделать так:

@media (max-width:480px) < body< background-color: #000; >/* ещё какие-то стили. */ >