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

Объявление

Темы статьи: 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; /*Фоновое изображение фиксируется*/

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

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

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

Нравится

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