Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

июнь 2021
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30


Чувашия-это моя Россия

Как измениться страница при использовании background-image.

Зададимся вопросом: " Возможно ли вместо фона разных цветов в блоках страницы заливать разные картины, фото, видеоролики и прочее?" . Ответ будет утвердительным: ДА! Вот этим сейчас и займемся. Узнаем как это делать, что нам потребуется для оформления страницы сайта. И, вообще, нужна ли такая процедура для страницы сайта?

Значит вместо однотонного фона выберем какой-то кусочек красивого рисунка и размножим его по-горизонтали и по-вертикали всей страницы сайта; вот этот кусочек посмотрите.

Далее в блоке нижнего колонтитула страницы сайта проделаем тоже самое, но с другим кусочкем рисунка. Каталог таких рисунков бесчисленно множество - выбирай не хочу в поисковиках.

Поменяли цвет строчки в верхнем колонтитуле страницы ( color: #966;), чтобы глаза не резало. Добавили в body( в основном теле страницы) строчку background-image: url(../fon/38.jpg); , которая вызывает из папки "fon" кусочек рисунка 38.jpg с расширением .jpg . Для украшения нижнего блока колонтитула страницы бесплатного сайта в нем появилась строчка background-image: url(https://seosait21.ru/fon/628.jpg);, которая вызывает из папки "fon" кусочек рисунка 628.jpg. И в принципе все.

Вот, что изменилось в файле index.css - очень мало:

                 @charset "utf-8";
                 /* CSS Document */

                   body {
	                    background: #FFFFEC;
	                    background-image: url(../fon/38.jpg);
                         }
                   div#nav {
	                   width: 100%;
		               background: #AFFFFF;
		               padding-top: 50px;
		               padding-bottom: 50px;
		               font-family: Georgia, "Times New Roman", Times, serif;
		               font-size: 28px;
		               color: #966;
		               text-align: center;
                          }
                   table {
	                   width: 100%;
	                   height: 95%;
	                       }
                   td#tdleft {
	                   width: 20%;
	                   background: #CDF;
	                         }
                   td#tdcenter  {
	                   width: 60%;
	                   background: #CDC;
	                        }
                   td#tdright  {
	                   width: 20%;
	                   background: #CDF;
	                       }
                   div#copy {
	                   width: 100%;
		               background: #FCF;
                       background-image: url(https://seosait21.ru/fon/628.jpg);
		               padding-top: 20px;
		               padding-bottom: 20px;
		               font-family: Verdana, Geneva, sans-serif;
		               font-size: 18px;
		               color: #036;
		               text-align: center;
	                       }

Ваша страничка на глазах меняется к лучшему. Приобретает благородный вид. Тем более здесь не надрываемся подбирая фоны, картины, фото для сайта. На следующих страницах убрал просвечивающие рамки между блоками строкой ( border-spacing: 0 0;) в table и нижние, боковые зазоры добавлением строки ( margin: 0;) или ( margin: 0 0 0 0;) в body. Конечно, строки добавляются без скобок.

Как менять Вы уже поняли. Ширину колонок страницы сайта лучше выражать в процентах от ширины тела страницы, потому что на разных экранах изменения в пикселях может не соответствовать пропорции экрана, тогда неизбежны искажения структуры страницы сайта, картинка будет не прогнозируемая.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную   назад   дальше   вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: