Как сделать фон для сайта?!

Объявление

Темы статьи: HTML & CSS, Создание сайтов Метки:

Как сделать фон для сайтаПоговорим теперь о некотором дизайне сайта, а именно рассмотрим в данной статье фон для сайта, точнее как его применить. И так, скажу вам сразу что применить его можно несколькими способами, а так же его можно и настраивать. Но, скажу вам сразу что самый верный и практичный способ это через HTML и CSS.
Конечно же вы должны догадываться что фон для сайта это обычная картинка которая просто встраивается в его основание.

Заранее приготовьте какую либо маленькую картинку, но советую вам взять подходящие, то есть сделанные именно для этого.
Сделаем обычный и самый простой фон, для этого воспользуемся способами HTML и CSS. То есть, сначала сделаем только через html а потом сделаем только на css.
Вставляется это все или обращается именно к телу страницы, то есть тег BODY. Прописать атрибут тега body для обычного фона мы можем такой BGCOLOR=””, в кавычках указываем цвет, то есть код или слово. Чтоб поставить картинку мы уже прописываем атрибут BACKGROUND=””, в кавычках мы уже указываем саму картинку, то есть путь к ней и название с форматом.

Код будет выглядеть так:

<!--Задает цвет фонв-->
<body bgcolor="#0000FF">
<!--Задает картинку фона-->
<body background="images.jpg">

Советую вам сразу же опробовать это на своей странице.
Теперь рассмотрим фон для сайта уже на стилях css, для этого открываем файл стилей, и в самом начале прописываем стиль для тега тела страницы body. В нем мы прописываем атрибуты стилей такие как background-image для фоновой картинки и атрибут background-color для фонового цвета. Как нам уже известно ставим мы уже ни знак равно и кавычки, а двоеточие, далее прописываем цвет или картинку и закрываем точкой с запятой.

Вот такой стиль у вас должен получиться:

Объявление

/*Задает цвет фона*/
body {
background-color:#0000FF;
}
/*Задает картинку фона*/
body {
background-image:url(image.jpg);
}

Не забывайте файл стилей прикрепить к странице с помощью внутренней ссылки:

<link href="styles.css" rel="stylesheet" type="text/css">

Если вы все это проделали, то конечно же поняли что картинка повторяется, вот и получается фон из-за этого. Можно сделать чтоб она не повторялась вообще, можно чтоб повторялась в одном направлении, можно ее просто зафиксировать на месте. В общем смотрите следующий код:


background-image:url(image.jpg); /*Задает картинку фона*/
background-repeat:repeat; /*Повторяет картинку*/
background-repeat:no-repeat; /*Не повторяет картинку*/
background-repeat:x-repeat; /*Повторяет картинку по горизонтали*/
background-repeat:y-repeat; /*Повторяет картинку по вертикали*/
background-position:top; /*Располагается вверху*/
background-position:left; /*Располагается слева*/
background-position:right; /*Располагается справа*/
background-position:bottom; /*Располагается внизу*/
background-position:center; /*Располагается по центру*/
background-attachment:fixed; /*Фоновое изображение фиксируется*/

И так, все нам теперь с этим ясно, теперь знаем как сделать фон для сайта. Чтоб вы не думали где же искать эти подходящие картинки, тем более если не знаете как их рисовать самим, я вам приготовил несколько оригинальных фоновых изображений. Скачать вы их сможете кликнув по ссылке ниже.

Скачать фоновые изображения

Автор статьи: Илья Якушин
Понравилась статья?

Нравится

Если Вам понравилась статья, Вы можете внести любую сумму на развитие блога. Буду Вам очень благодарен!

Практически тот же набор можно скачать на телефон Вулкан официальный, советуется тут.