Как вставить картинку в css

CSS

скачать бесплатно – ” HTML на примерах, всё доступно и просто (для начинающих)”
– – –чайник, HTML ДЛЯ ЧАЙНИКОВ– – –
>> с к а ч а т ь <<

скачать бесплатно – “Как создать классный сайт!
От начала и до конца”
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

Как вставить картинку в cssКак вставить картинку в css?
Чтобы вставить картинку в css, вы должны использовать правила background-image.

Давайте рассмотрим на примере

body{
background-image:url(/wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads/имя рисунка.gif);
background-repeat: repeat-y;}

Данный момент, весь фон будет наш рисунок
background-image:url(/wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads/имя рисунка.gif) – вставляем рисунок.
background-repeat: repeat-y – в какую ось ставим рисунок с повторением.        
Можно ставить картинку с повторением в ось – х (background-repeat: repeat-х;),
а можно вообще запретить повтор – no-repeat (background-repeat: no-repeat;),

Рисунку также можно задать отступы, используя правило margin.
Давайте рассмотрим всё на примере.

body{
background-image:url(/wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads/имя рисунка.gif);
margin-right:150px;
margin-top:20px;
}

Что мы сделали?
margin-right:150px – отступ с права на 150 пикселей
margin-top:20px – отступ с верха на 20 пикселей.
Давайте рассмотрим ещё парочку примеров.

body{
background-image:url(/wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads/имя рисунка.gif);
background-repeat: repeat-y;
background-position: right;
}

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

body{
background-image:url(/wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads/имя рисунка.gif);
background-repeat: repeat-y;
background-attachment: fixed ;
}

Это означает, что сколько бы мы не крутили колесика мышки, фоновая картинка остается у нас на виду.

body{
background-image:url(/wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads//wp-content/uploads/имя рисунка.gif);
background-repeat: repeat-y;
background-position: 400px 250px;
}

Это означает, что наша картинка будет где угодно и в любом месте где мы захотим. Данный момент картинка будет 400px – с левого края, 250px – с верхнего края.

Читайте также:  css селекторы

– Давайте закрепим –

background-image – используется для вставки фонового изображения, url (“/wp-content/uploads/my-image.jpg”) – указываем ссылку на картинку:
background-image: url (“/wp-content/uploads/my-image.jpg”);

background-repeat – используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Имеется несколько настроек:
– background-repeat: repeat-x – изображение повторяется только по горизонтали
– background-repeat: repeat-y – изображение повторяется только по вертикали
– background-repeat: repeat – изображение повторяется по горизонтали и вертикали
– background-repeat: no-repeat – изображение не повторяется

background-attachment – данное свойство определяет, будет ли фоновое изображение фиксироваться при прокрутке страницы:
– background-attachment: scroll – прокручивается вместе со страницей
– background-attachment: fixed – при прокрутке фон остается неподвижным

background-position – задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Может задаваться:
top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

И кстати, если Вы ищете недорогой хостинг могу посоветовать Вебхост – для неограниченного количества сайтов и абузоустойчивый Зомро – для доров, зайтов про казино и адалт.

дальше. – Текст в CSS.чайник, CSS ДЛЯ ЧАЙНИКОВ

 

 

 

 

 

 

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий