Работа с фоном элемента в css

Как в html сделать фон в виде цвета или картинки?

Вы можете задавать фон блока или всей страницы с использованием различных вариантов:

• при помощи цвета,
• использовать изображение,
• градиентный фон,
• использовать сразу несколько вариантов (например, картинка + цвет или несколько картинок сразу).

Введу того что HTML не особо предназначен для визуального оформления страницы, в с помощью HTML можно сделать только фон в виде цвета или изображения. Для использования остальных вариантов создания фона нам не обойтись без помощи CSS. Но обо всём по порядку.

Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.

Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor

PHP

<table bgcolor=»#сссссс»>

1	<table bgcolor=»#сссссс»>

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

PHP

<table background=»images/bg.jpg»>

1	<table background=»images/bg.jpg»>

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

Лучше и эффективнее воспользоваться CSS.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the
property.

The different background images are separated by commas, and the images are
stacked on top of each other, where the first image is closest to the viewer.

The following example has two background images, the first image is a flower
(aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):

#example1 {  background-image: url(img_flwr.gif), url(paper.gif);  background-position: right bottom, left top;  background-repeat: no-repeat, repeat;}

Multiple background images can be specified using either the individual
background properties (as above) or the shorthand property.

The following example uses the shorthand property (same result as
example above):

Цветовая модель RGBA

Следующая система цвета, которая используется в CSS называется RGBA, она использует в своем синтаксисе альфа-значение, которое определяет степень прозрачности конкретного пиксела.
RGBA является более современным методом задания цвета и имеет следующий синтаксис:

селектор {
color : rgba(R,G,B,A);, где:
}

• R означает Red (красный)
• G означает Green (зеленый)
• B означает Blue (синий)
• A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от до 1, где:

• — цвет невидимый.
• 1 — цвет непрозрачный.

Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:

Применение RGBA в CSS.1
…/* и так до десятого блока */
1

. На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен

Во-вторых, мы использовали CSS свойство display, которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством мы использовали значение inline-block, которое позволяет нам выстроить все элементы

в линейку (сделали элементы «блочно-строчными»).
Подробное изучение блочной и строчной модели CSS предусмотрено в учебнике позднее в статье «Блочная и строчная модель в CSS»

На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, мы использовали CSS свойство display, которое определяет, как должен отображаться элемент

В нашем случае, с этим свойством мы использовали значение inline-block, которое позволяет нам выстроить все элементы

в линейку (сделали элементы «блочно-строчными»).
Подробное изучение блочной и строчной модели CSS предусмотрено в учебнике позднее в статье «Блочная и строчная модель в CSS».

Результат нашего примера:

Рис. 47 Пример задания цвета с помощью RGBA в CSS.

Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее

Цветовая модель RGB

Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий).
Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:

селектор {
color : rgb(R,G,B);
}

Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в (минимальное значение):

p {
color : rgb(0,0,255); /* задаём синий цвет для всех абзацев */
}

Хочу заранее обратить Ваше внимание на то, что допускается указывать значения цвета RGB в виде процентных соотношений. Мы с Вами подробно рассмотрим какие единицы измерения существуют и используются в CSS в следующей статье «Единицы измерения CSS, размер шрифта».
Например, чтобы задать оранжевый цвет для всех заголовков второго уровня, используя систему RGB и процентные значения, необходимо использовать следующие значения параметров:

h2 {
color : rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */
}

Пример кода, демонстрирующий разные цветовые модели

<html>
    <head>
        <title>background-color</title>
        <style>
            #hex {
                background-color: #0000FF; /* Синий цвет в шестнадцатеричной */
            }

            #rgb {
                background-color: RGB(255, 0, 0); /* Красный RGB */
            }

            #rgba {
                background-color: RGBA(255, 0, 0, 0.3); /* Красный RGBA с прозрачностью 30% */
            }

            #hsl {
                background-color: HSL(250,100%,50%); /* hsl: c параметрами (250,100%,50%) */
            }

            #hsla {
                background-color: HSLA(250,100%,50%,0.3); /* Цвет в системе hsla: c параметрами (250,100%,50%,0.3) */
            }

            #yellow2 {
                background-color: yellow; /* Желтый цвет фона */
            }

        </style>
    </head>
    <body>
        <h1 id="hex">Цвет в шестнадцатеричной системе представления цвета синий</h1>
        <h1 id="rgb">Цвет в системе rgb: красный</h1>
        <h1 id="rgba">Цвет в системе rgba: красный, с альфа-каналом 0.3</h1>
        <h1 id="hsl">Цвет в системе hsl: c параметрами (250,100%,50%)</h1>
        <h1 id="hsla">Цвет в системе hsla: c параметрами (250,100%,50%,0.3)</h1>
        <h1 id="yellow2">Желтый цвет фона</h1>
    </body>
</html>

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Стажер в отдел продюсерства (продюсер/методист)

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Масштабирование фоновых  изображений в CSS</title>
<style> 
div {
width : 8em; /* устанавливаем ширину блока */
height : 8em; /* устанавливаем высоту блока */
border : 3px solid orange; /* устанавливаем сплошную границу размером 3px оранжевого цвета */
background : url(manul.jpg); /* указываем путь к файлу, который будет использоваться как фоновое изображение */
background-repeat : no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
margin-right : 15px; /* устанавливаем величину отступа от правого края элемента */
margin-bottom : 15px; /* устанавливаем величину отступа от нижнего края элемента */
color : yellow; /* устанавливаем цвет шрифта желтый */
}
.test   {background-size : auto;}  /* фоновое изображение содержит свою ширину и высоту (значение по умолчанию) */
.test2 {background-size : 100px 100px;}  /* задаем ширину и высоту фонового изображения */
.test3 {background-size : 70% 70%;}  /* задаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size : cover;}  /* масштабируем фоновое изображение под размеры элемента (часть изображения скрывается) */
.test5 {background-size : contain;}  /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

Масштабирование фоновых изображений в CSS (свойство background-size).CSS свойства

Прозрачность фона

Есть два возможных способа сделать элемент прозрачным: свойство , описанное выше, и указание цвета фона в RGBA формате.

Возможно вы уже знакомы с моделью представления цвета в формате . (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

color: rgb(255,255,0);
color: rgb(100%,100%,0);

Цвета, заданные с помощью , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.

Объявление цвета схоже по синтаксису со стандартными правилами . Однако, кроме всего прочего, нам потребуется объявить значение как (вместо ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от (полная прозрачность) до (полная непрозрачность).

color: rgba(255,255,0,0.5);
color: rgba(100%,100%,0,0.5);

Разница между свойством и заключается в том, что свойство применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

body { background-image: url(img.jpg); }
.prim1 {
  width: 400px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  font-weight: bold;
  opacity: 0.5;
  filter: alpha(opacity=70); /*для IE8 и более ранних версий*/
  text-align: center;
}
.prim2 {
  width: 400px;
  margin: 30px 50px;
  background-color: rgba(255,255,255,0.5);
  border: 1px solid black;
  font-weight: bold;
  text-align: center;
}

Попробовать »
Примечание: значения не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения :

background: rgb(255,255,0);
background: rgba(255,255,0,0.5);

Рассылка приглашений в группу в ВК

Как поменять размер видео в готовом коде

Если размер видео, который у вас получился после настройки кода не подошел к вашему сайту (например, вы сменили дизайн и ширина сайдбара у вас уменьшилась) не обязательно идти в Youtube и делать новый код. Можно вручную поменять цифры, отвечающие за ширину и высоту проигрывателя (width=”560″ height=”315″), только пропорции подберите подходящие.

Точно также вы можете руками поправить все характеристики плеера, описанные выше.

На этом у меня все. Удачи.

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.

<!DOCTYPE html>
<html>
<head>
	<title>Пример фиксированного фонового изображения</title>
<style> 
div {
height: 600px; /* устанавливаем высоту элемента */
}
.primerFixed {
background-image: url('nich.jpg'); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */
background-position: center; /* центрируем задний фон */
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
</style>
</head>
<body>
	<div></div>
	<div class = "primerFixed"></div>
	<div></div>
</body>
</html>

В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.

Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

Шестнадцатеричные значения

Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Цвет с использованием шестнадцатеричной системы задается с использованием следующего синтаксиса:

селектор {
color : #RRGGBB;
}

#RR (красный)
#GG (зеленый)
#BB (синий)

Значение, фактически содержит три шестнадцатеричных числа (RR — для красного, GG — для зеленого, BB — для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение — (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:

p.intro {
color :  #777; /* задаём темно-серый цвет для всех абзацев с классом intro */
}

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel — which specifies the opacity
for a color.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the
alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

The following example defines different HSLA colors:

Example

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark
green with opacity */#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green
with opacity */

Свойство CSS background-position

При помощи этого свойства в CSS можно задавать положение фонового изображения или градиента относительно границ элемента.

Значения могут быть либо абсолютными (px, em или другие единицы), либо относительными (%). При этом сначала указывается значение по горизонтали, а потом по вертикали.

Если с абсолютными значениями все просто (так сказать, как слышится, так и пишется), то с относительными немного сложнее. Значение означает, что точка, находящаяся на 10% правее левого края изображения будет находиться на 10% правее левого края элемента, а точка, находящаяся на 20% ниже верхнего края изображения будет находиться на 20% ниже верхнего края элемента.

Кроме того, в качестве значений можно использовать ключевые слова (, , , , ). В этом случае порядок не имеет значения.

Дефолтное значение — 0 0, т.е. изображение находится в левом верхнем углу элемента.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Свойство CSS background-image

Это свойство используется для того, чтобы задать в качестве фона изображение (.png, .jpg, .gif, .svg) или градиент (по сути также являющийся изображением, которое генерирует браузер).

В качестве значения указывается путь к файлу изображения или data URI (изображение, закодированное в base64). Кавычки можно использовать как одинарные, так и двойные, а можно и вообще не использовать. В данном случае это дело вкуса.

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

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

создает переход от центра к периферии.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Style
Font Size
Font Google
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Универсальное свойство background

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

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

• background-color (color | transparent).
• background-image (url | none).
• background-position (значение).
• background-size (auto | length | cover | contain).
• background-repeat (repeat | repeat-x |repeat-y | no-repeat).
• background-origin (padding-box | border-box | content-box).
• background-clip (border-box | padding-box | content-box).
• background-attachment (scroll | fixed | local).

Давайте рассмотрим пример использования универсального свойства background:

Пример использования универсального свойства background

И так, что мы сделали в этом примере:

• Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
• Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
• Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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

Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Как сделать фон в виде картинки в CSS?

Для этого нам нужно будет:

1. 1.К себе на сайт в определённую папку с картинками загрузить изображение, которое мы хотим использовать в качестве фона.

2. 2.Задать его в CSS

   PHP

   background:url(images/bg.jpg);

   1	backgroundurl(imagesbg.jpg);

В скобочках указываем путь к картинке.

Путь указывается относительно файла CSS, в котором вы пишете это свойство.

Так же если изображение у вас небольшое то будьте готовы увидеть такую картину:

Вы можете отключить повторение фона для маленьких изображений, дописав no-repeat:

PHP

background:url(images/bg.jpg) no-repat;

1	backgroundurl(imagesbg.jpg)no-repat;

Так же можно сделать чтобы он повторялся только по горизонтали:

PHP

background:url(images/bg2.jpg) repeat-x;

1	backgroundurl(imagesbg2.jpg)repeat-x;

Или только по вертикали:

PHP

background:url(images/bg2.jpg) repeat-y;

1	backgroundurl(imagesbg2.jpg)repeat-y;

Кроме того мы можем управлять расположением фонового изображения для элемента. Для этого нам нужно дописать следующе:

• top – для выравнивание по верхнему краю
• bottom — для выравнивания по нижнему краю
• left – выравниваем по левому краю
• right – по правому
• center – выравниваем по центру (можно использовать как для выравнивания по горизонтали так по вертикали)

Так же можно сочетать эти выравнивания.

PHP

background:url(images/bg2.jpg) no-repeat top center;

1	backgroundurl(imagesbg2.jpg)no-repeat top center;