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

Как изменить фон сайта через JS?

@Mike напрасно вы насчет «чуть-чуть». С .background тоже вполне работает: fiddle. Проблема автора и его магическое «не работает», скорее всего, в чём-то из того, что вы описали в комментарии.

15 ноя 2015 в 16:31

Свойство background — общее сво-во, оно тоже может ссылаться на изображение, если в значении указать url() пруф

15 ноя 2015 в 16:31

Возможно ваша проблема в том, что вы пытаетесь изменить background до полной загрузки страницы.

var ReplaceBackground = function() < document.body.style.background = 'url(http://media.rockstargames.com/rockstargames/img/global/downloads/wallpapers/games/v-igg2-1920x1080.jpg)'; >document.addEventListener("DOMContentLoaded", ReplaceBackground); 

Отслеживать
ответ дан 15 ноя 2015 в 20:22
709 3 3 серебряных знака 12 12 бронзовых знаков

• javascript
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Какой код поменять, чтоб сменить фон сайта?

Здравствуйте, хочу сменить фон и дизайн основы сайта.
Копался в ccs, но не могу понять, какой именно отрезок кода менять и на что.
Если конкретного ответа на вопрос нет, то просьба не рекомендовать изучать html и css, так как уже это делаю.Спасибо

Villeres
21.01.16 в 00:01

Комментарии (16)

Павел Романов 21.01.2016 11:42 #

Зайдите на сайт. Нажмите F12. Откроется консоль.
Найдите элемент с фоном (элементы подсвечиваются, когда проводите курсором по коду) и посмотрите какие CSS-атрибуты ему присвоены. Там же будет имя CSS-файла с оформлением и номер строки, где указано конкретное правило.
Отредактируйте нужное.

Антон 21.01.2016 14:56 #
Ну вы хоть ссылку на сайт дайте и объясните что на что поменять желаете

Villeres 21.01.2016 15:13 #

www.evakmos.ru/ вот сайт, хочу сделать темный фон везде и шрифты в основе поменять.

еще убрать желтый и оранжевые цвета полностью

Комментарий был изменён 21.01.2016 в 15:13
Антон 21.01.2016 15:26 #

За фон у вас отвечает картинка по адресу www.evakmos.ru/images/body.png
Либо замените картинку, либо в style.css отредактируйте 53 строку вписав туда новое изображение

body < margin: 0;background-image: url(../images/body.png);

если лень заморачиваться с изображением, то измените эту строку на

body < margin: 0;background-color: #5F3C3C;

И закоментируйте в 156 строке белый фон
например так

body < font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #999999;/* background-color: #fff; */>

Шрифт меняется так же в 156 строке
Остальные цвета аналогично

Villeres 21.01.2016 16:44 #

спасибо, заменил body.png.а желтый цвет как убрать?
Антон 21.01.2016 16:55 #
В меню менять на 1731 строке файла style.css

@media (min-width: 992px) < .navigation >

Градиент для каждого браузера персонально

В футере менять на 1684 строке

.footer-bottom

Villeres 21.01.2016 17:11 #

сделал сначала на 1731 строке, желтый цвет стал более тусклым просто.

потом сделал футер и все стало как раньше… яркий желтый цвет везде

Антон 21.01.2016 17:15 #

Та я вам ничего и не менял, это из вашего css, я просто указал где именно менять. Замените коды цвета на те которые вам больше нравятся.

Villeres 21.01.2016 17:40 #

заменил цвета, но не вышло все равно
Антон 21.01.2016 17:56 #

В меню меняйте цвета градиента для каждого браузера, подробнее тут
В футере меняйте значение background: #xxxxxxx

Villeres 21.01.2016 18:12 #

"@media (min-width: 992px) < .navigation background-color: #e2e2e2;
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
padding: 10px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@col', endColorstr='@col2', GradientType=0);
border-radius: 0 0 18px 18px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.9) inset, 0 1px 4px rgba(0, 0, 0, 0.2);
border: 1px solid #dccf00;
height: 40px;
margin-bottom: 10px;
position: relative;
z-index: 1;> >"

то есть вот таких вот кодов должно быть 5?(если под 5 браузеров)

только менять в них первую строчку( background: -moz-linear-gradient)?

Антон 21.01.2016 18:49 #

Нет, код должен быть один, только этот
Селектор background: -moz-linear-gradient отвечает за градиент в FF
Селектор background: -webkit-linear-gradient отвечает за градиент в Webkit браузерах (chrome, safari . )
Селектор background: -o-linear-gradient отвечает за градиент в опере
Селектор background: -ms-linear-gradient отвечает за градиент в ie
Я же вам ссылочку дал, почитатайте, полезно же

Антон 21.01.2016 18:59 #

Пожалейте людей с мобильным трафиком, поставьте картинку в бэкграунд поменьше. У вас же ЦА это люди с мобильных браузеров.

Villeres 21.01.2016 19:06 #

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

Текущую редакцию Вашего 1С-Битрикс можно просмотреть на странице Обновление платформы ( Marketplace > Обновление платформы ).

Старт, Стандарт

Какую часть фона можно поменять

Примечание: В этом уроке рассматривается самый простой способ изменения фонового изображения в стандартном шаблоне интернет-магазина 1С-Битрикс: Управление сайтом.
Для замены фона в другом шаблоне обратитесь к разработчику сайта.

В стандартном шаблоне можно поменять фон только ограниченной части сайта: фоновая картинка будет видна по бокам от общего блока с информацией:

Фоновая картинка выводится через параметр backgroundImage, прописанный в шаблоне сайта. Статическая информация, которая не нуждается (либо редко нуждается) в замене, как правило, размещается в статических зонах Header (шапка сайта) и Footer (подвал сайта). Заменить ее можно в коде самих файлов, но делать это придется квалифицированному разработчику, либо разработчик должен организовать такую замену с помощью компонентов системы силами редакторов сайта.

Подробнее. Контент-менеджеру в шаблоне сайта лучше ничего не изменять.

Однако можно этому параметру присвоить новое значение (содержащее ссылку на новую картинку), не вмешиваясь в шаблон сайта.

Видеоурок

Как поменять фон на сайте

Итак, рассмотрим пошагово, как заменить фоновую картинку:

Загрузите в структуру сайта Этот способ используется для загрузки файлов в роли статического контента. Например, вывести файл формата PDF для загрузки его пользователем.

В административном разделе системы перейдите в папку, в которой будет храниться загружаемый файл. Нажмите на кнопку Загрузить файл под фильтром, откроется форма для загрузки. Добавьте файлы для загрузки и сохраните их.

Подробнее. нужную картинку:
Теперь добавьте новое свойство раздела Управление свойствами раздела идентично управлению свойствами страницы. Это - большое удобство системы "1С-Битрикс: Управление сайтом". Но есть несколько существенных отличий, которые обязательно учитываются в работе контент-менеджером. Сначала расскажем о том как управлять, а потом - об этих различиях.

Подробнее. (папки), в котором хотите заменить фоновую картинку. Перейдите в нужный раздел на сайте. Добавить свойство можно только в Административной части сайта (в Публичной части только редактируются существующие свойства), поэтому кликните на стрелочку кнопки Изменить раздел и выберите пункт В панели управления: В открывшейся таблице в новой строке укажите следующий код:

• колонка Код: backgroundImage
• колонка Значение: style="background-image: url('/bg.jpg');" где /bg.jpg - это полный путь То есть если бы мы загрузили фоновую картинку с именем my_picture.jpg в папку /images, то вместо /bg.jpg нужно было бы прописать /images/my_picture.jpg . от корня сайта до картинки, включая её название и расширение.

Сохраните результат, и на сайте будет отображаться новый фон!

Примечание: Фоновая картинка не масштабируется в зависимости от экрана, поэтому нужно подготовить достаточно большое изображение (например, по стандартным параметрам экрана: 1920х1280 пикселей).

Если же страницы сайта достаточно длинные (то есть их нужно скроллить вниз), то лучше использовать картинку с бОльшей высотой (иначе при скроллинге картинка будет видна только в верхней части сайта).

Желательно это знать:

• HTMLbook - справочник по HTML

Background-size: масштабирование фонового рисунка

Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

• auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

background-size: auto auto;

…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:

background-size: 250px auto;

…то высота фоновой картинки будет вычисляться автоматически.

contain — фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются.

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

Числовые значения

Как мы уже сказали, размер фонового рисунка можно определять с помощью значений, указанных в пикселях, процентах и других единицах измерения CSS.

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

background-size: 300px 300px;

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.