Как изменить фон сайта через 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: -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;
…то высота фоновой картинки будет вычисляться автоматически.
Числовые значения
Как мы уже сказали, размер фонового рисунка можно определять с помощью значений, указанных в пикселях, процентах и других единицах измерения CSS.
Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:
background-size: 300px 300px;
Учтите, что изображение может исказиться, если вы не попадете в его пропорции:
Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :
Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.
Поддержка браузерами
Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.
Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.