Поставить картинку на задний фон форума.
Нам хочется как-то оживить задний фон форума! Простой цветной фон, какой-то унылый!
И сегодня мы исправим эту ситуацию.
Находим подходящую картинку. Желательно, чтобы она весила не очень много 100 кб, ну или 1450 максимум! Почему такое требование к картинке!? Просто потому, что в готовом виде, страница форума будет весить достаточно, и чтобы не утяжелять её ещё больше нужно стараться ставить меньший овьём!
Опять вернёмся к самому первому вопросу, когда мы с первого этапа должны определить, где, собственно сидит наш Background.
Почему его нужно найти!?
Просто потому, чтобы они не конфликтовали между собой! А конфликт будет какой!? Скорее всего ваш задний фон-цвет будет главенствовать и не отобразит задний фон картинку. Честно говоря, никогда не задумывался, кто кого задавит… ну в общем это тема другой статьи!
Большинство людей вряд ли делали собственными руками форум, поэтому никто не знает, где и, что лежит!
Открываем наш браузер и открываем форум. Наводим мышку по пустому месту, где виден задний фон. Нажимаем ПКМ, далее – просмотр кода элемента.
Настроить вид данного окна – показа кода вы сможете под себя, как вам удобно! Я настроил так, что код показывается в отдельном окне! Это намного удобнее, чем и код и страница в одном окне. Потренируйтесь в настройках показа кода. Настройки ищем,
например в Яндекс браузере справа в верхнем углу.
Смотрим код…
На верхнем скрине, честно сказать нихрена не видно! Чтобы исправить эту ситуацию разделим скрин на левую и правую строну.
Нас в левой части интересует тег <body>, потому что в нем, чаще всего сидит задний фон. Вот эта надпись нас интересует когда вы нажимаете, то он выделяется и справ будет показывать код.
Здесь мы видим, что есть такая надпись - background-color, чтобы убедиться, что вы нашли именно то, что искали попробуйте нажать на жать на тот элемент, когда вы наведете мышку на нужную строчку, то появится окно включения и выключения!
На самом деле, я то знаю, что мы нашли то, что нам нужно!
И в этом окошке нас интересует ещё одна запись –стрелка показывает на название файла, где сидит это свойство!
Это файл - common.css
Теперь наводим опять мышку на название файла и высвечивается путь, где лежит у нас этот файл!
Теперь, дело в шляпе! Найти файл, отредактировать запись, прописать путь к картинке. И картинку, и отредактированные файлы закинуть на сервер!
На самом деле я чуть-чуть уже притомился всё это объяснять!
Сделать намного проще…чем об этом всём рассказать!
Дальше заменяем на такой код:
background: url(Путь до вашей картинки) 100% 100% no-repeat fixed;
background-size: cover;
Картинка будет стоять фиксировано и растянется на весь задний фон.
Вот, что у нас получилось, смотрим код:
