Как сделать фон для сайта, особенности применения CSS

Добавить фон

Для добавления фотографий, картинок и видео в качестве фона:

  1. Добавь файлы соответствующей кнопкой.
  2. Перетащи файлы на фоновый видеоряд.

Как сделать фон в ворде прозрачным?

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

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

6-fon.jpg

Рисуем этот прямоугольник по всей странице.

7-fon.jpg

В результате она приобрела синий цвет. Затем кликаем правой кнопкой мыши по этому синему прямоугольнику. Выбираем в открывшемся окне в самом низу «формат фигуры».

В открывшемся окне активируем строку «рисунок или текстура», а затем нажимаем на кнопку «файл». Здесь откроется окно выбора картинки, выбираем нужную и жмем на «вставить».

В результате картинка встала в фигуру. Теперь нужно ее сделать прозрачной. В самом низу находим ползунок прозрачности и двигаем его до тех пор, пока не придадим картинке нужную прозрачность.

В моем варианте это 50%. Жмем на ОК и получаем результат. Вокруг картинки видны контуры от прямоугольника. Их надо убрать. Снова заходим во вкладку «формат фигуры», но здесь выбираем раздел «цвет линии» и ставим галочку на строке нет линий. В результате по краям контуры фигуры удалились.

Картинка по бокам выделена маркерами. А это значит, что писать вы ничего не сможете в документе.

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

Можно еще выставить в «свойствах» картинки положение «за текстом».

Фон

Фон в видеоредакторе представлен отдельным видеорядом.

Фоновый видеоряд находится правее музыкальной дорожки и левее основного видеоряда.

Графические файлы в кадре сменяют друг-друга также, как и везде в редакторе, сверху вниз — картинка выше сменяется картинкой ниже по вертикальному ряду.

Параметры фона находятся среди остальных параметров, сразу под основным редактором.

Как сделать фон для сайта в html

Для фона в html, можно применить такие атрибуты, как bgcolor и background. По умолчанию, браузеры в качестве фонового цвета страниц принимают белый.

Его можно поменять в атрибуте bgcolor тега при помощи шестнадцатеричного кода. Допустим, так:

Чтобы применить в качестве фона картинку, применяем атрибут background. Его значением является адрес графического файла.

Для начала надо найти заготовку фонового изображения. В интернете ресурсов для этого достаточно много, в частности сделать это удобно на сайте //www.subtlepatterns.com/.

1-3.jpg

Заходим на данный сайт, здесь все просто и понятно. Можно выбрать понравившееся изображение, пусть самое первое, для примера – seigaiha.png и сохранить на свой компьютер, как правило, в папку images своего проекта. Размер его составляет в данном случае 400 на 400 px.

Установить фоновое изображение на сайт можно различными способами. Можно стили вставить непосредственно в html-документ. Или применить написание кода в редакторе Notepad++, а затем перенести в код на хостинге.

Основные теги HTML для создания фона

Итак, переходим к вопросу, как сделать картинку фоном в html на весь экран. Для того чтобы сайт красиво выглядел, необходимо понимать одну достаточно важную деталь: достаточно просто сделать градиентный фон или закрасить его однотонным цветом, но если вам необходимо вставить на задний план картинку, она не будет растягиваться на всю ширину монитора. Изображение изначально нужно подобрать или самостоятельно сделать дизайн с таким расширением, в котором у вас будет отображаться страница сайта. Только после того как фоновое изображение готово, переносим его в папку с названием «Images». В ней мы будем хранить все используемые картинки, анимации и другие графические файлы. Эта папка должна находиться в корневом каталоге со всеми вашими файлами html. Теперь можно переходить и к коду. Существует несколько вариантов записи кода, с помощью которого фон будет меняться на картинку.

  1. Написать атрибутом тега.
  2. Через CSS стиль в HTML коде.
  3. Написать CSS стиль в отдельном файле.

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

  1. Первый способ записи через атрибут тега (body) в файле index.htm. Он записывается в таком виде: (body background= «Название_папки/Название_картинки.расширение»)(/body). То есть если у нас картинка с названием «Picture» и расширением JPG, а папку мы назвали как «Images», тогда запись HTML-кода будет выглядеть так: (body background=»Images/Picture.jpg»)… (/body).
  2. Второй метод записи затрагивает CSS стиль, но записывается в том же файле с названием index.htm. (body ).
  3. И третий способ записи производится в двух файлах. В документе с названием index.htm в теге (head) записывается такая строчка: (head)(link rel=»stylesheet» type=»text/css» href=»Путь_к CSS_файлу»)(/head). А в файле стилей с названием style.css уже записываем: body {background: url(Images/Picture.jpg’)}.

828099.jpg

Как в HTML сделать фон картинкой, мы разобрали. Теперь необходимо понять, как растянуть картинку по ширине всего экрана.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий