Как задать фоновое изображение в css

Как сделать фон? CSS-свойство background

В CSS свойство background предназначено для управления фоном любого элемента.

Это универсальное свойство, которое позволяет вам сразу установить несколько параметров. А именно:

• фоновое изображение или градиент;
• начальную позицию фонового изображения и его размер;
• повтор фонового изображения;
• перемещение фона относительно области просмотра браузера и элемента;
• цвет и т.д.

body { background: url(bg.jpg) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ green; /* color */ }

Универсальное свойство background состоит из восьми других свойств (в скобках указано значение по умолчанию, которое имеет каждое из них):

• background-image (none);
• background-position (0% 0%);
• background-size (auto);
• background-repeat (repeat);
• background-attachment (scroll);
• background-origin (padding-box);
• background-clip (border-box);
• background-color (transparent).

Вы можете указывать их все и при этом практически в любом порядке (хотя порядок, рекомендованный в спецификации, приведён выше). Те свойства, которые вы не указали в background , будут иметь значения по умолчанию (указанные в скобках).

background-image – фоновое изображение или градиент

CSS-свойство background-image позволяет в качестве фона устанавливать обычные изображения (например, PNG, SVG, JPG, GIF, WebP) и градиенты. По умолчанию данное свойство имеет значение none .

Использовать в качестве фона изображение очень просто. Осуществляется это так:

.image { /* универсальное свойство */ background: url('/assets/img/bg.jpg'); /* через специальное свойство */ /* background-image: url('/assets/img/bg.jpg'); */ }

Значение url() позволяет указать путь к файлу изображения, и оно будет отображаться в качестве фона для этого элемента.

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

В url() задать изображение можно также через URI данные:

.image { /* base64 encoded png */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAADUExURTWn/0me3wIAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAPSURBVCjPYxgFwxgwMAAAAeAAAerhzjMAAAAASUVORK5CYII='); background-repeat: no-repeat; background-position: center; }

background-image кроме установки изображений, позволяет также задать линейный, радиальный или конический градиент .

Пример двухцветного линейного градиента, идущего сверху вниз:

.linear-gradient { background-image: linear-gradient(black, white); /* направление по умолчанию: to bottom */ }

С указанием угла и нескольких цветов:

.linear-gradient { background-image: linear-gradient(135deg, #f44336, #ff9800 20%, #ffeb3b 70%, #4caf50); }

Радиальный градиент указывается с помощью radial-gradient :

.radial-gradient { /* circle - форма радиального градиента */ background: radial-gradient(circle, black, white); }

Пример конического градиента:

.conic-gradient { background-image: conic-gradient(#2196f3 30%, #ffc107 0 70%, #f44336 0); }

Кроме этого в CSS имеются повторяющиеся градиенты ( repeating-linear-gradient , repeating-radial-gradient и repeating-conic-gradient ), с помощью них можно например, создавать различные узоры.

body { min-height: 100vh; background-image: repeating-linear-gradient(45deg, #fafafa, #fafafa 20px, #e0e0e0 20px, #e0e0e0 40px); }

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

body { min-height: 100vh; background: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee) 0% 0% / 60px 60px, linear-gradient(-45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee) 0% 0% / 60px 60px; }

background-position – положение фонового изображения

Свойство background-position задаёт позицию фонового изображения (или градиента). Значение по умолчанию: 0% 0% (помещает изображение в верхний левый угол).

.bg { background-position: 0% 0%; }

Первое значение определяет смещение по горизонтали, а второе — по вертикали.

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

• пикселей (например, background-position: 100px 5px );
• процентов ( background-position: 100% 5% );
• с помощью ключевых слов: left , center , right , top и bottom ( background-position: top right ).

В современных браузерах в background-position можно указывать до 4 значений.

Когда вы объявляете одно значение, оно будет определять горизонтальное смещение. Вертикальное в этом случае будет иметь значение center .

.bg { background-position: 50px; /* 50px center */ }

Задавать background-position можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме center ) и величина смещения ( px или % ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью px или % .

При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.

.bg { background-position: left 45px bottom; /* left 45px bottom 0px */ }

Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.

Пример использования в background-position 4 значений:

.bg { background-position: left 45px bottom 10px; /* left 45px bottom 10px */ }

Это свойство поместит изображение слева на 45px и снизу на 10px.

background-size – масштабирование фона

Свойство background-size масштабирует фоновое изображение согласно заданным размерам. По умолчанию оно имеет значение auto .

Пример синтаксиса для явного указания размеров фона:

.cover { background-image: url(cover.jpg); /* ширина - 400px и высота - 300px */ background-size: 400px 300px; }

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

1. Ключевые слова: auto (по умолчанию), contain и cover .

• auto – автоматически рассчитывает размер на основе реального размера изображения и соотношения сторон;
• contain – масштабирует изображение с сохранением пропорций так, чтобы оно целиком поместилось внутрь фона (т.е. 100% auto или auto 100% по меньшей стороне);
• cover – масштабирует изображение с сохранением пропорций так, что оно всегда покрывала всю область фона (т.е. 100% auto или auto 100% по большей стороне);

2. Одно значение. При указании только одного значения (например, background-size: 400px ), оно указывает ширину, а высота в этом имеет значение auto .

В background-size задавать размеры можно используя любые единицы измерения: px , % , em , vw , vh и т.д.

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

background-repeat – повтор фонового изображения

Свойство background-repeat определяет должно ли повторяться фоновое изображение, а если да, то как.

.card { background-image: url(card-bg.png); background-repeat: repeat-x; }

Значения этого свойства (помимо обычных значений вроде inherit ):

• repeat (по умолчанию) – повторение фонового изображения выполняется в обоих направлениях (по вертикали и горизонтали);
• repeat-x – повторение осуществляется только по горизонтали;
• repeat-y – повторение только по вертикали;
• no-repeat – не повторять, просто показать изображение один раз;
• space – повторение изображения делается в обоих направлениях так, чтобы они полностью заполнили область; размещение изображений выполняется равномерно, для к ним добавляются отступы, при этом крайние изображения всегда должны касаться краёв области;
• round – повторение изображения осуществляется в обоих направлениях так, чтобы в область поместилось целое количество изображений; при этом изображения могут как уменьшаться в размерах, так и растягиваться (если осталось меньше половины ширины изображения, то выполняется их растягивание, если больше, то сужение).

Также имеется синтаксис с двумя значениями (первое – по горизонтали, второе – по вертикали):

.card { background-repeat: repeat space; /* background-repeat: repeat repeat; */ /* background-repeat: round space; */ }

Синтаксис с одним значением – это просто сокращение синтаксиса с двумя значениями. Например, значение space вычисляется как space space .

.card { background-repeat: space space; }

background-attachment – прокрутка фона относительно области просмотра

Свойство background-attachment определяет как будет перемещаться фон относительно области просмотра браузера и элемента для которого он установлен.

• scroll (по умолчанию) – фон прокручивается в области просмотра браузера, но остается фиксированным внутри самого элемента;
• fixed – фиксированный фон несмотря ни на что;
• local – фон прокручивается как в окне браузере, так и в внутри элемента (если имеется прокрутка).

background-origin — размер области для рисования фона

Свойство background-origin определяет область для рисования фона.

• border-box – вся область элемента включая границы (border);
• padding-box (по умолчанию) – область элемента за исключением границ (т.е. включая только padding);
• content-box – область содержимого элемента (т.е. за исключением границ и padding);

background-clip – обрезка фона

background-clip очень похож на background-origin , но в отличие от него он обрезает фон, а не изменяет его размер.

background-clip имеет точно такие же значения ( border-box , padding-box и content-box ), но в качестве значения по умолчанию выступает border-box .

background-color – цвет фона

Свойство background-color применяется для установления сплошного цвета в качестве фона элемента.

По умолчанию данное свойство имеет значение transparent (прозрачный цвет).

body { background-color: transparent; /* default */ }

Пример задания цвета посредством шестнадцатеричного кода:

.image { background-color: #ffeb3b; }

Шестнадцатеричные коды – это один из способов объявления цвета в CSS. Другой способ – это использовать имена:

body { background-color: white; /* #ffffff */ }

Ещё способы объявить цвет – это использовать rgb() , rgba() , hsl или hsla :

body { background-color: rgba(63, 81, 181, 0.5); /* полупрозрачный цвет rgb(63, 81, 181) или #3f51b5 /* современная запись */ /* background-color: rgb(64 81 181 / 50%) */ }

body { background-color: hsla(231, 48%, 48%, 0.5); /* современная запись */ /* background-color: hsl(231deg 48% 48% / 50%); */ }

Несколько фоновых изображений

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

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

.multiple { background-image: url('bg-3.png'), url('bg-2.png'), url('bg-1.png'); background-repeat: no-repeat; background-position: right 20px bottom 20px, 20px 20px, 0% 0%; /* с помощью универсального свойства */ /* background: url('bg-3.png') right 20px bottom 20px no-repeat, url('bg-2.png') 20px 20px no-repeat, url('bg-1.png') 0% 0% no-repeat; }

CSS свойство background. Фон для сайта // «Фрилансер по жизни»

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

Background-color

Определяет цвет фона элемента
По умолчанию (прозрачный)
Цветной (RGB)
Цветной (RGBA)

Background-image

Устанавливает фоновое изображение для элемента либо задает градиентную заливку
Линейный градиент
Радиальный градиент

/* Old browsers */ background: rgb(236,232,157); /* FF3.6-15 */ background: -moz-linear-gradient(top, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(top, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to bottom, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);

/* Old browsers */ background-color: rgb(236,232,157); /* FF3.6-15 */ background-image: -moz-linear-gradient(top, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%); /* Chrome10-25,Safari5.1-6 */ background-image: -webkit-linear-gradient(top, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background-image: linear-gradient(to bottom, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);

/* Old browsers */ background: rgb(236,232,157); /* FF3.6-15 */ background: -moz-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: radial-gradient(ellipse at center, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);

/* Old browsers */ background-color: rgb(236,232,157); /* FF3.6-15 */ background-image: -moz-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%, rgba(94,83,115,1) 50%, rgba(24,181,164,1) 100%); /* Chrome10-25,Safari5.1-6 */ background-image: -webkit-radial-gradient(center, ellipse cover, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background-image: radial-gradient(ellipse at center, rgba(236,232,157,1) 0%,rgba(94,83,115,1) 50%,rgba(24,181,164,1) 100%);

Background-repeat

Определяет, как будет повторяться фоновое изображение
По умолчанию

Фоновое изображение повторяется по горизонтали и вертикали.

background: url(‘img/background/avatar.jpg’) repeat;

background-image: url(‘img/background/avatar.jpg’); background-repeat: repeat;

Устанавливает одно фоновое изображение в элементе без его повторений

background: url(‘img/background/avatar.jpg’) no-repeat;

background-image: url(‘img/background/avatar.jpg’); background-repeat: no-repeat;

Фоновый рисунок повторяется только по горизонтали.

background: url(‘img/background/avatar.jpg’) repeat-x;

background-image: url(‘img/background/avatar.jpg’); background-repeat: repeat-x;

Фоновый рисунок повторяется только по вертикали.

background: url(‘img/background/avatar.jpg’) repeat-y;

background-image: url(‘img/background/avatar.jpg’); background-repeat: repeat-y;

Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.

background: url(‘img/background/avatar.jpg’) space;

background-image: url(‘img/background/avatar.jpg’); background-repeat: space;

Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

background: url(‘img/background/avatar.jpg’) round;

background-image: url(‘img/background/avatar.jpg’); background-repeat: round;

Background-position

Задает начальное положение фонового изображения, где первое значение (проценты, px, слово) определяет расположение по горизонтали, второе — вертикали.

По умолчанию

background: url(‘img/background/avatar.jpg’) 0 0 no-repeat;

background: url(‘img/background/avatar.jpg’) top left no-repeat;

background-image: url(‘img/background/avatar.jpg’); background-repeat: no-repeat; background-position: 0 0;

background: url(‘img/background/avatar.jpg’) 50% no-repeat;

background: url(‘img/background/avatar.jpg’) center no-repeat;

background-image: url(‘img/background/avatar.jpg’); background-repeat: no-repeat; background-position: 50% 50%;

background: url(‘img/background/avatar.jpg’) 0 50% no-repeat;

background: url(‘img/background/avatar.jpg’) left no-repeat;

background-image: url(‘img/background/avatar.jpg’); background-repeat: no-repeat; background-position: 0 50%;

background: url(‘img/background/avatar.jpg’) 100% 100% no-repeat;

background: url(‘img/background/avatar.jpg’) bottom right no-repeat;

background-image: url(‘img/background/avatar.jpg’); background-repeat: no-repeat; background-position: 100% 100%;

background: url(‘img/background/avatar.jpg’) 25px 30px no-repeat;

background-image: url(‘img/background/avatar.jpg’); background-repeat: no-repeat; background-position: 25px 30px;

Background-attachment

Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
По умолчанию

Позволяет перемещаться фону вместе с окном браузера

background: url(‘img/background/bg.jpg’) 0 0 no-repeat scroll;

background-image: url(‘img/background/bg.jpg’); background-repeat: no-repeat; background-position: 0 0; background-attachment: scroll;

Делает фоновое изображение элемента неподвижным, а так же устанавливает фоновое изображение относительно окна браузера

background: url(‘img/background/bg.jpg’) 0 0 no-repeat fixed;

background-image: url(‘img/background/bg.jpg’); background-repeat: no-repeat; background-position: 0 0; background-attachment: fixed;

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae, earum perferendis provident quaerat, veritatis, debitis repudiandae iste porro commodi dolorum. Soluta, cum incidunt, doloremque commodi odit maxime aut autem!

Tempore quaerat accusantium placeat autem! Aliquid optio dignissimos facere, consequuntur perferendis dolorem provident rem vel, dolorum repellendus veniam quia odit, nobis voluptatem excepturi est, necessitatibus et at. Expedita voluptate, excepturi.

Nemo libero, laboriosam perferendis saepe quis in quibusdam sed itaque tempora dolor temporibus ipsa officiis voluptatum quisquam, nostrum modi harum vitae officia. Facilis rerum ducimus dolores necessitatibus cum voluptate velit.

Cupiditate omnis similique magnam libero eligendi, nobis at minima quas dignissimos ipsum, vitae, explicabo, quibusdam hic. Quasi, ut, dolore! Odio reprehenderit nostrum consectetur nulla eius porro facilis, corporis ipsum! Fugit.

Omnis assumenda sapiente praesentium doloribus earum laboriosam, temporibus nihil reiciendis numquam aut accusamus hic possimus voluptatem incidunt voluptates molestiae, dicta impedit. Dolorum explicabo quos, provident, facilis dicta incidunt nobis delectus.

Omnis repudiandae in nulla, debitis at quo ut distinctio, porro adipisci voluptatibus fugiat ea tempore assumenda accusantium similique tempora eligendi ab aspernatur aut voluptas corrupti vero id harum. Quidem, voluptatibus.

Similique fugiat aut facilis veniam nesciunt iure eveniet, sequi debitis ducimus rem velit cum id voluptatum asperiores maxime veritatis reprehenderit expedita, labore obcaecati. Obcaecati eaque temporibus aperiam aut natus rerum.

Similique exercitationem error esse architecto ut expedita aliquam optio magni repellat, dolore facilis sit deleniti quae qui commodi autem, cumque blanditiis dignissimos nostrum non et amet delectus! Magni, quam, iusto.

Nisi neque fuga reprehenderit est? Culpa eos sunt tempore, optio cumque minima sit iste iure pariatur deserunt enim officia eum necessitatibus perspiciatis modi molestias consequatur accusamus, repellat aut consequuntur sed!

Saepe illo vel mollitia sunt, quod expedita maxime reprehenderit a ipsam vero aut labore nulla, necessitatibus, eaque inventore quaerat. Reprehenderit, natus. Excepturi asperiores, esse saepe numquam magni tempore hic, voluptatum.

Optio reprehenderit, fugit. Dignissimos saepe, eveniet quis quidem aliquam molestias labore voluptatum eligendi nesciunt iusto rem, inventore aperiam quisquam velit corporis sapiente sunt, aspernatur laboriosam, adipisci consectetur optio impedit corrupti.

Neque ipsum voluptatibus, vitae qui ullam, facere consequuntur cum quis eius, voluptate, fuga quas! Facilis voluptatem accusamus autem ratione, ab officiis dolor ad ullam veritatis vitae, perspiciatis iusto pariatur minus!

Nihil iste, ab repellat hic amet aliquam in sit repudiandae quia tempora, eum quaerat quas, quam beatae aspernatur. Ex officiis laboriosam numquam magni provident, obcaecati praesentium delectus reprehenderit libero autem.

Minus sunt, reiciendis est similique eveniet numquam iusto in placeat neque eaque laborum recusandae sapiente officiis vero rem obcaecati ab dolores. Natus repudiandae ad perferendis veniam similique id sed impedit!

Corporis dicta facere consectetur nam doloremque asperiores illum error suscipit vel nesciunt quasi blanditiis tempore eaque quam laborum eveniet quod nemo, pariatur omnis officiis, quaerat nobis? Eius neque commodi amet.

Voluptate hic non sint quidem amet ullam quod reprehenderit est molestias? Aut, voluptatum, exercitationem? Non dolore ratione aperiam repellendus sed fugiat necessitatibus quam, delectus cupiditate, dolorem neque vitae quidem doloremque!

Distinctio velit nobis officiis, sit quos cupiditate obcaecati accusamus illum et adipisci tenetur dolore ab dolores quis modi recusandae ut, eos cum minima commodi. Suscipit commodi, dolore consectetur iste nemo?

Velit corporis, rem tempora cum quasi dolor, neque impedit laboriosam dolores similique optio, eius, aperiam inventore dignissimos saepe. Similique vel aspernatur sit ea sunt veniam officiis fugit rem voluptates eum.

Dicta nesciunt dolores saepe repellendus officiis non explicabo placeat consequuntur inventore sint dolor debitis consectetur perferendis quod atque tempora dolorum molestiae, dignissimos praesentium fuga, a autem voluptate. Ullam aliquid, fuga.

Modi laudantium mollitia, fugit repellat. Molestias asperiores error omnis laboriosam expedita architecto quod vel doloremque rerum culpa ipsa reprehenderit similique aliquid ex facilis quidem aperiam deserunt, repudiandae porro dolore maxime.

Libero impedit quae optio quasi iste aperiam nam nostrum temporibus repellat obcaecati aspernatur repudiandae, eaque aliquam autem iure, molestias itaque similique adipisci eius aliquid ab esse delectus totam accusantium quis!

At possimus, iusto architecto minima atque a illum eos adipisci ut nesciunt, asperiores molestias ratione, eaque nihil placeat. Saepe facilis molestiae esse ipsa dolor ratione quisquam facere provident voluptates veritatis.

Non et, hic aperiam natus obcaecati, blanditiis maiores voluptates officia minus quibusdam dolore praesentium nam laboriosam earum provident reiciendis dicta explicabo vel itaque ut repellat iure, at, eos repudiandae! Autem.

Molestiae sed, ea quam veniam. Totam deleniti voluptatibus quae veritatis officiis blanditiis, temporibus in vel! Minus nesciunt qui optio aut quis alias non beatae. Molestias voluptate expedita consequuntur nisi iusto.

Tempora sed deserunt consequuntur, unde, id sequi ex illo sapiente at repellat laboriosam reiciendis voluptate maxime ratione cum in obcaecati inventore ad, odit neque fuga esse. Tenetur dolorem nam quia.

Illum numquam facilis ipsum quidem dicta perferendis nulla adipisci omnis in quam accusamus, corrupti iusto, unde soluta eum laborum vero fuga quia. Cum quas numquam reiciendis, rem non in tempore?

Aspernatur, laborum, repellendus? Officiis, quibusdam? Eius, perspiciatis officia recusandae pariatur reprehenderit delectus ipsa excepturi fugit minus, dolore dolorum amet sunt, iure aperiam autem explicabo sit odio nihil! Temporibus odit, debitis!

Dicta, magnam, fugit. Amet ducimus suscipit fugit esse eum, earum, reprehenderit, dolor, placeat sequi illum facilis consectetur quaerat quasi neque rerum. Velit sequi culpa, nulla quasi labore nisi obcaecati ipsam.

Pariatur itaque nemo mollitia officia, quaerat odio, ratione illum vero, eveniet sit incidunt facere atque saepe quos eum deleniti laudantium eaque earum veniam inventore minima repellat expedita voluptas. Quae, inventore.

Nostrum suscipit praesentium dolores veniam ullam quasi harum, voluptatum possimus maxime! Dolores, cumque quia aut vitae maxime. Non repellat maxime iure nemo voluptatum cum et odit harum omnis! Itaque, similique.

Repellendus similique et molestiae est necessitatibus voluptatum repellat assumenda, officiis doloremque, officia accusantium beatae provident deleniti, perspiciatis debitis ipsum culpa itaque sunt nisi impedit magni totam eveniet alias nihil rerum.

In asperiores nobis quas perferendis cupiditate molestias quod commodi tempore ea, voluptatum debitis saepe nemo nesciunt adipisci quam voluptatem inventore. Magni reiciendis itaque praesentium quod aliquam debitis nobis sequi ea.

Commodi iusto rem laboriosam, quam deleniti autem eligendi cupiditate ab, nesciunt placeat voluptate deserunt aspernatur eos iure voluptas! Nisi, nobis? Eum et, cum, expedita pariatur placeat possimus ad nulla necessitatibus!

Odio alias animi quis, minima nulla incidunt est vel, laborum hic maiores quia error consectetur assumenda atque, temporibus maxime corporis cum vitae commodi consequuntur beatae. Sint odio placeat culpa, hic.

Ipsum earum, fugiat illo, sint eos nostrum autem distinctio, fuga facilis, repellat cum! Maxime sint magnam repellat labore molestiae aliquam ipsa incidunt cumque quam harum officiis, voluptas, recusandae commodi! Aliquam!

Animi soluta reiciendis ullam, tempore inventore dolores illum nobis expedita ut, asperiores error nemo eveniet vero iste consequuntur facilis, porro consectetur repudiandae odit optio. Ipsa corrupti sapiente consectetur omnis, officia.

Commodi iste dolores natus, magnam, alias officia voluptatum quia unde corporis, ad vero! Consequatur iusto doloribus voluptates, sint, aliquid, odit quos aspernatur natus perspiciatis id recusandae doloremque voluptate, a accusantium.

Ea molestias quisquam at tempore ipsa laboriosam aspernatur, hic rerum iste molestiae minima vero voluptatem consequuntur corrupti neque eius iure animi id! Nostrum quia accusantium velit placeat nulla numquam ex?

Nobis eum, tenetur illo, architecto ex rem est, repellat nemo, consectetur asperiores deserunt esse doloribus quos eligendi. Et consequuntur, perferendis nostrum omnis porro neque quod voluptas facilis quibusdam corporis commodi.

Fugit quod eius maxime accusantium sequi officia quis voluptatum minus nesciunt at distinctio, vel id assumenda. Blanditiis ad laboriosam officiis illum quidem, itaque quibusdam dolore expedita, maiores repudiandae, odio voluptatum?

Magni minus incidunt, ipsa ipsum sed! Tempora, dolore magnam quaerat ipsa consequatur nesciunt temporibus eveniet enim obcaecati! Aperiam, reiciendis eos, dolor fugiat id quam iure quasi cupiditate fugit aliquid non.

Possimus esse, consectetur. Facilis dolorem dolore omnis consequatur. Excepturi aliquid repellendus quia commodi ipsum harum, necessitatibus modi, cumque nesciunt voluptatum tempora ipsa voluptatibus dolore fugiat porro possimus officia et ex!

Enim iste unde ea totam, fugiat dolores minus eius commodi quod, molestias quibusdam! Beatae rerum exercitationem aliquid, impedit doloribus minima officiis dignissimos, nobis optio fuga porro repellat sint obcaecati sunt.

Consequuntur, porro, distinctio atque velit fugit pariatur obcaecati nesciunt quod nisi quasi nihil! Vel laudantium rerum sapiente, mollitia quae iste eligendi sed repudiandae dolorum ipsum debitis omnis animi, molestiae suscipit.

Cupiditate expedita hic tempore voluptatum numquam voluptate, necessitatibus, quaerat in quasi voluptates atque, recusandae quae velit aliquam nam. Similique ab optio, ipsa. Nisi a tempora accusamus voluptatibus culpa laudantium cum.

Dolorum illo amet adipisci ab maxime saepe accusantium, inventore, asperiores, quod, doloremque officia eius magnam expedita? Voluptatem veniam similique nihil ut natus rem non eaque, aut sed repellendus voluptates fugiat!

Nesciunt quibusdam dolor, quasi reprehenderit deleniti officiis alias in, dolorem ea sint eaque sit, debitis harum! Animi tenetur aliquid non quae, in, quisquam maiores minima repudiandae corporis dignissimos asperiores, doloremque!

Inventore tenetur quibusdam debitis modi asperiores possimus excepturi tempora ea dicta ipsa explicabo veniam temporibus natus fugit corrupti dolores laboriosam ut, ipsam blanditiis quod. Reiciendis facere vero modi similique earum?

Illo corrupti repudiandae debitis dolores nesciunt quam, consequuntur quos facilis fugit quis laborum voluptatem. Quos recusandae, cupiditate, omnis alias dolorem quibusdam necessitatibus, architecto doloremque nulla libero corporis magni quo saepe!

Ratione dolore tempore ex alias, deleniti at aliquid porro, iure soluta excepturi hic dolorum nesciunt voluptate quasi ipsum molestiae ducimus et, vitae quae. Magni eveniet nemo aut similique commodi sequi.

Cum cumque autem natus a. Vel cupiditate eligendi, reiciendis rerum harum. Dolor libero recusandae rerum consequatur, dolorum obcaecati soluta quos cumque sit officia autem cum pariatur veniam, nihil saepe. Placeat!

Consectetur animi, fugit laboriosam iusto quod harum mollitia facilis saepe libero sequi fuga sed placeat dignissimos, quos a excepturi minima, corporis veritatis aut nesciunt. Illo pariatur velit iure suscipit sequi.

Inventore amet voluptates magnam facere nesciunt aspernatur laboriosam vero at libero consequatur a, maxime culpa, blanditiis consectetur quod adipisci ullam sed necessitatibus quidem, velit eos ipsa? Facere, possimus minima fugiat.

Officia eveniet nesciunt eius fuga, consequatur asperiores, at debitis. Quae amet velit fugiat. Rem nobis voluptatibus, illum blanditiis, corporis est dolor soluta quasi reiciendis inventore aspernatur unde non laudantium possimus.

Odio animi natus soluta, quod sed cum deserunt placeat deleniti perspiciatis. Ab rerum dolor architecto! Delectus, soluta laboriosam aliquid voluptatibus vero quod quam laborum. A harum, consequatur in necessitatibus excepturi!

Dignissimos laudantium deserunt quasi recusandae, nostrum voluptatum animi corporis eveniet corrupti iure voluptatibus esse dolore omnis dolorem necessitatibus impedit consequuntur earum. Dolor ad molestiae, odio nihil non hic, labore sit?

Magni adipisci nemo sint soluta necessitatibus, nisi eos aperiam similique nesciunt ab officiis maxime quo cupiditate. Esse eum id sunt totam sint accusantium iste eius asperiores maiores error! Amet, obcaecati.

Aspernatur voluptates sint ad dicta veniam. Provident distinctio sapiente numquam, laborum nobis itaque incidunt ipsam facilis, totam alias earum, tenetur corporis quaerat eveniet possimus iure unde quos hic eos minus.

Dolorem provident, similique sapiente ad animi sequi distinctio, aliquam at perspiciatis, maxime minima eveniet architecto. Adipisci iure incidunt atque fugit tempora cupiditate, voluptatem nihil delectus quaerat libero iusto quisquam dolores.

Voluptate hic incidunt excepturi, odit tempora commodi officiis autem in laboriosam sunt molestias, dolor quaerat enim pariatur eligendi repudiandae! Fugit quaerat facilis dicta laudantium reiciendis nobis velit sit nihil nostrum.

At architecto sint quidem perspiciatis numquam id vitae iste, ducimus consequuntur mollitia qui autem vero voluptates aut deserunt debitis obcaecati quis nobis magnam nostrum sunt velit assumenda commodi. Voluptatibus, dolor.

Reiciendis, repellat minus vero ipsam non iusto vitae explicabo temporibus saepe eum voluptatum libero! Aperiam aliquam nam temporibus harum porro deserunt natus dicta voluptate, eaque ut ex cupiditate modi odit.

Assumenda inventore autem quas at eaque saepe omnis iure delectus consequuntur minima ipsum eligendi, neque architecto aut incidunt corrupti. Deserunt nemo numquam, eum excepturi. Necessitatibus aspernatur facere ullam expedita tempore.

Dolore illum doloremque, sit, sed itaque, nam labore officia deserunt quidem veniam iure veritatis dicta! Debitis architecto, sed iure placeat, sapiente at itaque suscipit dolorem maiores, culpa assumenda corporis recusandae.

Eum libero inventore reprehenderit pariatur earum facere doloribus nam odio quas necessitatibus dolores dolore, tempore eos incidunt quaerat, non, fugiat debitis consequuntur ab saepe perferendis molestiae quos aspernatur! Ducimus, officia.

Incidunt eligendi optio, unde adipisci suscipit harum officia ullam quibusdam eius expedita ipsam reiciendis voluptatibus similique quidem cumque eum quasi fuga. Veritatis reiciendis quam laudantium ullam odio animi similique porro!

Eum magnam quasi, ratione sit assumenda. Voluptas distinctio, illo consequuntur nihil veniam doloribus dolor quisquam optio, accusantium dolorem. Distinctio error sit delectus, ab natus eveniet atque ipsam, molestias debitis eum!

Impedit quidem similique quos amet rerum, blanditiis, dolor eum natus nostrum facilis sit fuga dicta suscipit praesentium, adipisci nesciunt quibusdam laborum? Facilis facere voluptatum id eaque voluptatem maxime odio eveniet.

Nisi impedit omnis libero unde sapiente nihil repudiandae quaerat esse dicta iste deleniti, amet aliquam dolores temporibus aspernatur et mollitia sequi animi, iure debitis inventore? Natus inventore harum blanditiis aperiam.

Voluptates praesentium obcaecati maxime quasi similique pariatur accusamus ducimus hic ea adipisci. Maxime illo, modi id ratione illum labore ut omnis eos rem nesciunt molestias fugiat voluptas? Ex, eos, non!

Exercitationem aut totam quasi tenetur provident vitae id, obcaecati quo, labore sed iure laboriosam? Blanditiis, porro accusantium sunt eum, tempore maxime dicta quae perspiciatis praesentium, minima, odio aut placeat numquam.

Odit nemo distinctio, dolor, officiis repellat vitae quia sed corporis, pariatur fuga fugit. Nobis maiores eaque ullam, facilis culpa. Autem molestiae modi, necessitatibus mollitia quaerat eveniet beatae ratione animi veniam!

Laboriosam harum impedit, error, reprehenderit quod velit quisquam dolores. Adipisci, ea tempora praesentium tempore architecto, enim. Autem temporibus non quasi est, cumque quia velit. Ipsa, non, autem? Rerum, dolorem, deserunt.

Culpa, est voluptatibus blanditiis consequatur distinctio. Dolor harum vitae odit voluptatem beatae laborum. Amet facere, possimus ipsam eum, explicabo natus, quia vero sed omnis voluptates laudantium excepturi. Maxime, hic, vitae!

Eos hic, delectus cupiditate consequuntur minus sequi fuga error. Sed vero, ut modi possimus a voluptate iure, ducimus, dolor reprehenderit numquam unde voluptates dignissimos maiores consequatur similique, autem et in.

Distinctio atque ullam qui beatae minus explicabo non totam tempora illo id. Amet vitae modi error laboriosam, maiores possimus enim laudantium voluptatem molestias accusamus. Fuga quia a assumenda cumque autem!

Rem illum quis corporis quia quibusdam, voluptatibus odit quae non, voluptatem commodi, quos necessitatibus aut ipsa eaque ducimus modi. Facilis culpa voluptatibus tempore sed perferendis asperiores optio aspernatur, fuga recusandae!

Blanditiis asperiores omnis voluptatem reiciendis debitis accusamus eos ipsa quisquam, accusantium corrupti mollitia, dicta ipsam ut. Illum sint cum sunt veniam eos cumque, amet aperiam sequi id consectetur commodi deserunt.

Similique dolorum porro recusandae odit soluta reiciendis exercitationem quidem reprehenderit. Fugiat cum, exercitationem quis earum? Architecto, nobis officiis vitae illo hic explicabo quae fugit. Aut ullam laborum delectus minima inventore.

Sapiente delectus voluptatem eaque provident consequuntur ad adipisci beatae consequatur nulla repellat quasi sunt in, illum earum autem itaque quo debitis enim, dolorum nam cupiditate fuga? Aperiam, laudantium sit cumque!

Maxime vitae omnis illum blanditiis saepe, consectetur minima rerum facere tempora ipsum, asperiores sint dignissimos deserunt commodi totam quod minus molestias natus ab nulla nemo eius accusantium. Architecto, est facere?

Quaerat repudiandae dolorem culpa a voluptatum ipsa molestiae. Voluptate facilis suscipit repudiandae perspiciatis dolore ipsum quasi harum fugiat nisi. Exercitationem eveniet at ipsa quia distinctio natus est ullam, officiis molestias.

Magni adipisci illo voluptatibus ipsa, deserunt, officiis atque voluptate rerum natus nisi inventore similique! Eos nostrum dolorem eaque pariatur, neque architecto eius alias fugiat, dolor, nesciunt error? Amet pariatur, atque!

Sit earum molestiae quidem voluptas, distinctio ducimus dolore pariatur architecto nobis consequuntur sunt in voluptatum sapiente neque eligendi esse autem ab omnis, reiciendis hic similique labore. Eum reiciendis officiis, repellat.

Qui ratione assumenda fugit ipsam magnam nobis odit eaque quis ea reprehenderit accusamus, sapiente iusto rerum incidunt praesentium reiciendis eius suscipit! Reiciendis delectus quas officia ut laboriosam ea fugit, aliquam!

Nostrum autem quae rem, magnam fuga placeat rerum dolor odio minima maxime esse voluptatibus corrupti excepturi, enim impedit perferendis facilis! Ex sint, non voluptates totam deleniti temporibus suscipit impedit est.

Iste voluptate officiis at error dolorem natus repellendus labore nemo doloribus, molestias commodi sit. Soluta sed dolorem inventore, dicta enim sit, nostrum tempore vel vero explicabo quam iure ipsa reprehenderit.

Eos, enim exercitationem nam similique, quisquam odio. Harum mollitia iure ducimus recusandae autem quos placeat architecto repudiandae quisquam, nulla veniam, itaque quae fuga repellat adipisci porro vero! Ut, minus, iure?

Debitis, obcaecati ratione numquam itaque inventore. Aut quidem numquam, dolore, quisquam perspiciatis nihil, vel ipsa distinctio recusandae unde atque ipsum mollitia est quaerat? Error sunt assumenda consequatur, in possimus ullam.

Iure, quisquam odio! Ratione obcaecati aspernatur, suscipit eveniet. Soluta, et delectus. Nostrum aliquid, itaque iusto recusandae? Molestiae vitae et provident quaerat officia, in voluptatum, nihil maxime non dolorum architecto maiores!

Aspernatur ratione quisquam atque, odio omnis dolores quod aperiam quibusdam ducimus architecto sint voluptatibus in, esse facere magni mollitia eveniet laboriosam repellat saepe quaerat totam cum vel minus. Deserunt, fugiat.

Beatae esse, illo sunt, blanditiis, enim molestiae asperiores quo eos commodi dolores alias iusto, totam laborum dignissimos aliquam sit magni molestias tenetur officiis? Non, totam, repellat. Ratione, quae eligendi iste.

Perferendis doloribus, reprehenderit quisquam expedita eos esse doloremque nisi nesciunt necessitatibus architecto corporis quia ut obcaecati alias totam asperiores tenetur rerum officia est suscipit temporibus soluta fuga error incidunt. Perferendis.

Animi numquam rerum, laborum quod voluptatem. Aperiam tenetur quos assumenda quidem odit facilis. Adipisci iste, veritatis, quam at numquam omnis minus animi nisi neque aliquam vel sint, sunt amet rem!

Odio dolore, quos quaerat aut omnis maiores! Debitis quis soluta sequi sapiente eveniet ratione pariatur eius perferendis. Eligendi, rerum voluptatibus! Dolor illum eos totam assumenda, quisquam illo, modi vitae ipsa?

Itaque magnam omnis, veniam et accusamus obcaecati quidem, quasi voluptatibus magni distinctio aspernatur eos totam placeat labore alias fugiat neque ea similique blanditiis velit laudantium. Tenetur at voluptate, amet perferendis.

Obcaecati voluptatem laboriosam officia veritatis doloribus culpa beatae nobis ducimus corporis amet voluptate assumenda at dolore harum est quaerat modi, ut iusto nam laudantium nesciunt iure fuga nihil maiores? Molestiae!

Incidunt quas commodi inventore modi et ducimus similique assumenda rerum aperiam itaque facere laborum totam libero voluptatem minima, cupiditate perspiciatis, iusto, dolorum explicabo! Eum ipsam aut, inventore facilis cumque veritatis.

Aut tempora at eligendi obcaecati et sapiente veniam ex odio repellat laborum fugiat voluptatem, quam ratione consectetur consequuntur dignissimos aliquam, cum excepturi earum perferendis magnam cumque voluptatum dolorum? Nemo, natus.

Velit voluptates debitis a, earum ex expedita fuga laboriosam. Id facilis eaque perspiciatis doloribus nisi nesciunt dolor possimus suscipit quasi, cum. Architecto voluptate, odit obcaecati atque ea! Quasi, ut, provident?

Aperiam id tenetur laborum, delectus sit dolor quis blanditiis fugiat, quae consequuntur libero expedita suscipit culpa quas rem nihil tempore deleniti nesciunt debitis doloribus distinctio repudiandae officiis. Officiis, quaerat cum.

Doloribus fuga reiciendis, voluptate, tenetur possimus nihil debitis temporibus necessitatibus aperiam deserunt veritatis voluptatum incidunt fugit eos laboriosam a. Numquam officia ullam cupiditate fugiat natus optio delectus, reiciendis sunt obcaecati.

Sit quae aliquid omnis dolore vitae officiis iusto eveniet, nostrum, ducimus odio blanditiis dicta alias adipisci sed ipsum magni doloremque ex doloribus illum totam, natus possimus incidunt id. Recusandae, nesciunt!

Voluptas neque, distinctio ea. Aliquam vero, error officiis nobis consequatur est! Error perspiciatis quia modi sequi illum at, sapiente fugit unde ullam provident amet maiores excepturi nemo incidunt consequatur facilis?

Porro tenetur, mollitia facere, dolore tempore eius praesentium deleniti, dolorem assumenda eligendi perferendis! Blanditiis atque est expedita illum at ipsum, tenetur incidunt inventore a et nihil omnis, fuga iste sit.

Optio dolor autem odio nemo earum similique harum ad repudiandae facilis minima necessitatibus blanditiis temporibus, magnam repellat incidunt alias est eos ducimus ullam architecto. Suscipit ratione, velit maxime tempore praesentium.

Nobis iure laborum maiores, error ipsum ex quo nulla quas quibusdam, eius voluptas, dolore facere repellendus alias distinctio aliquid unde nesciunt, pariatur. Aliquid illum repudiandae, quisquam corporis, et ipsum recusandae?

Illum aliquam a, ab necessitatibus! Modi architecto rem quod quidem pariatur animi ad quisquam consequuntur a est totam tenetur deserunt distinctio ex amet voluptatibus quibusdam adipisci, ipsam. Autem numquam, non.

Ab soluta, praesentium nostrum aspernatur placeat modi porro aut maiores temporibus. Quidem id, suscipit ipsa ratione vero aut itaque sunt inventore enim saepe, minima ea vel! Reprehenderit cupiditate illum voluptate?

Quod numquam mollitia voluptate perferendis provident impedit dicta odit libero, obcaecati. In obcaecati aperiam nam ipsum, animi ab odit ipsa quidem doloremque, assumenda facere. Nulla officia, quas voluptatibus alias distinctio?

Officiis veritatis saepe nam neque cumque ipsa illum fugiat quis, rem repellendus quam temporibus ad! Porro quia architecto iure et libero doloribus corporis est perspiciatis, corrupti. Saepe vero voluptates ea.

Provident repellat non tenetur laborum atque eum voluptatem soluta consequuntur ipsam illum! Corporis sapiente voluptatum pariatur, quisquam, quo est ullam accusamus corrupti rem nulla ipsum nihil adipisci obcaecati repellat molestias?

Labore earum repellat dolorum aspernatur perspiciatis totam velit odio a itaque, nisi aperiam maiores fuga omnis perferendis architecto veniam ab consequuntur hic sequi, optio voluptates iste aut dolores. Accusamus, odit?

Saepe modi, inventore voluptatum sit facere incidunt quasi illo alias aliquam, vero quis molestias labore mollitia enim error minima quo ratione minus, natus. Sequi nostrum aliquam possimus ut, minus tempore!

Veniam laudantium reprehenderit adipisci optio magni, iure non quisquam voluptas illo ipsa. Nemo alias tenetur nihil magni, corrupti inventore in sit saepe quaerat deserunt quos, tempora ducimus, illo iusto maxime.

Odit officiis error fugit repellendus vel, voluptas nesciunt vero odio velit dolor consequatur et necessitatibus magni laboriosam non similique debitis quo, animi rem dolores. Debitis nam excepturi ipsum eius molestiae?

Odio adipisci et est aperiam at ut non explicabo ab ipsa illum! Illo sapiente ratione laborum placeat consectetur veniam dolores ex. Quisquam sapiente, laborum. Et assumenda ducimus quis quia facilis!

Explicabo reiciendis earum obcaecati modi, harum! Mollitia iste, aspernatur omnis velit atque! Ullam eveniet error debitis voluptates, alias, eaque architecto fugit accusantium. Praesentium eius consequuntur, ipsam reprehenderit excepturi! Voluptate, assumenda!

Ducimus ipsum pariatur, nesciunt molestias quae porro beatae quibusdam natus ab repellat repellendus enim accusantium praesentium molestiae, officiis ullam nobis eius commodi asperiores consequuntur deserunt. Aut autem tempora a, at.

Molestiae fuga aspernatur omnis voluptates, debitis atque dolores vero consectetur obcaecati porro maiores et cupiditate modi minus, dolorem dolor alias eligendi iste, cumque iusto! Id atque perferendis sed, voluptatibus fugiat.

Accusantium ipsam, reiciendis doloremque ipsa corporis similique. Tempore sit, molestias aliquid non incidunt rerum magnam at, laudantium minus dicta quam earum debitis animi placeat? Odio iure, a cupiditate possimus accusamus!

Incidunt, placeat autem nobis dolorum eaque libero ea non earum fugit nemo illo beatae labore distinctio architecto itaque. Repellat ipsam, earum maxime nesciunt laborum nisi minima iusto sed. Nulla, sit.

In recusandae soluta autem iusto voluptate eius iure repudiandae adipisci ex libero, ducimus provident, animi accusamus. Animi odio omnis at quidem magni veniam aut porro, voluptatem velit temporibus quis ipsa?

Itaque voluptatum, laboriosam nobis commodi eveniet. Reiciendis quia, illum ex. Nihil obcaecati deleniti, dolor debitis laboriosam atque fuga recusandae animi veniam harum tempore consequuntur! Dicta tenetur quo quaerat numquam omnis!

Beatae, libero, harum. Non error ut earum facilis, dolores modi beatae at magni deleniti quae tenetur excepturi optio distinctio inventore quod. Neque tenetur expedita saepe quis esse dolorem, animi voluptates.

Accusamus numquam quos dolor impedit molestiae dolorum cupiditate alias esse iusto assumenda deleniti repudiandae, ratione cumque mollitia quidem ex, molestias quam error tempore optio repellendus. Eos totam magnam soluta, odit.

A molestiae odio libero expedita voluptates distinctio nulla eius culpa provident eaque animi, soluta eos amet voluptas incidunt sunt in! Quisquam architecto deleniti, animi ipsum culpa itaque officia unde labore!

Itaque, aliquam, cupiditate. Rerum cum excepturi aliquam, minus facilis quod tempore ea modi commodi quaerat debitis deleniti est unde accusantium rem eos dicta placeat beatae, perferendis cupiditate dolor pariatur earum!

Eveniet provident dolores excepturi aperiam, fugit quia. Recusandae ullam minus facere dicta labore reiciendis porro, quia aliquam harum, nobis asperiores ratione quam. Voluptatem dolorem magni, suscipit est non, laudantium eius.

Exercitationem neque quo fugit dolorum nemo ea eius culpa nisi architecto quas illum harum commodi voluptatibus voluptates dolores veritatis aliquid rerum aspernatur quaerat ad nihil nesciunt laborum, illo quod vero.

Aperiam ipsa dicta quidem numquam! Explicabo quasi obcaecati aperiam aliquam odio nam, amet non nihil dolorem dolore. Non, iusto expedita, sapiente voluptatem corrupti deserunt consequuntur maiores magni, voluptas tempora quae.

Harum necessitatibus temporibus, odit. Obcaecati iure sed, soluta consequatur neque totam eos suscipit id! Cum repudiandae quos, doloremque cumque voluptatem deserunt porro odit harum nostrum, qui illo error consequatur quas!

Numquam sint architecto eaque dolorum nobis rerum, laborum ullam quam blanditiis ipsa pariatur esse illo cumque. Maxime, incidunt impedit doloribus hic quia similique autem nemo tenetur, veniam unde dolorem maiores.

Voluptas consequuntur, suscipit, ad quis quidem placeat libero tempora, veritatis, numquam quia nisi nam? Magni accusantium architecto porro quod voluptate minima facilis ducimus neque quidem hic ab animi aspernatur, non.

Eius veniam amet aliquam aperiam, temporibus, id distinctio quas sunt autem minima suscipit. Nihil iste, quam cupiditate, quidem odit animi, debitis illum odio voluptatibus officiis voluptate! Quaerat aliquid illum molestiae.

Incidunt distinctio molestiae inventore fuga earum mollitia error reiciendis obcaecati impedit labore recusandae, similique alias maxime, ipsum eos. Nemo dolor, nisi aut quo ex dolore, earum a enim possimus quibusdam.

Doloremque enim tempore numquam quo quasi quidem sed, reprehenderit tempora vero nobis aperiam saepe hic obcaecati voluptate fugiat ipsam esse dolor itaque illum sapiente perferendis eos aliquam. Minima, corrupti, dolorem.

Explicabo id aliquam est sed temporibus voluptatibus officiis, animi tempore fugit consequatur iure placeat deserunt minima, quibusdam magni vitae eum quidem iusto, praesentium aspernatur doloribus, sequi optio! Natus, sequi, consequuntur!

Voluptatibus numquam assumenda ex architecto, magni, et molestiae iure. Tenetur minus, dignissimos sapiente, nostrum, inventore in libero aliquam velit culpa, asperiores aliquid voluptas quibusdam molestiae possimus ex quia quam! Vel.

Vitae incidunt, ducimus neque! Incidunt libero facere officia, esse. Sapiente suscipit repellat distinctio quod, fugiat, iure animi, cum officiis modi libero eaque, ea perspiciatis blanditiis expedita consectetur quis? Sequi, soluta!

Nulla facere est repudiandae quos doloremque enim distinctio, beatae itaque adipisci similique, dolore temporibus, iste eaque? Dignissimos sapiente quos beatae odio debitis nemo! Veniam cupiditate fuga voluptatibus, alias ipsa et.

Necessitatibus, iste numquam dignissimos tempora sint saepe, vero deserunt illum. A pariatur illo nihil consequuntur blanditiis iusto, sit atque hic sint velit consequatur deleniti, magnam adipisci incidunt voluptatem, maiores amet!

Mollitia, hic repudiandae laudantium. Ratione earum dolor quam eum labore magni quasi, praesentium maxime laudantium non unde asperiores placeat perspiciatis obcaecati dolorem aliquid, repellendus omnis dolore iure assumenda! Cumque, repellendus.

Libero voluptatem repudiandae enim molestiae perspiciatis, ab ipsam consectetur sed quam itaque similique, eligendi error ullam perferendis mollitia, nisi quaerat tempora. Eligendi repudiandae cumque, minus qui veritatis odit necessitatibus voluptatibus!

Eaque temporibus aperiam quibusdam unde voluptatum culpa molestias facilis voluptatem, doloribus consequatur saepe reprehenderit amet, consequuntur fugiat doloremque! Voluptates dignissimos beatae laboriosam ea, molestiae amet blanditiis voluptatem architecto illum aspernatur.

Dignissimos distinctio velit, laboriosam aliquam. Magnam nobis dolor magni optio, dolorem eius consectetur similique rerum facilis eos voluptatem tempora beatae dignissimos ut eligendi, culpa omnis quasi accusamus quis vel consequuntur!

Omnis, non, impedit ipsa unde esse hic voluptatibus quam, reiciendis minima obcaecati illum quisquam amet optio vel quos cumque, praesentium temporibus exercitationem iusto voluptatem suscipit. Libero perferendis temporibus, quas rerum.

Deserunt neque ducimus perspiciatis officia! Maxime consectetur esse, nesciunt doloremque nemo rem rerum quod molestias fuga nulla odit officiis incidunt ratione aperiam maiores itaque! Unde officiis, nemo ipsam expedita ipsa!

Obcaecati pariatur dolore, iure quae itaque cumque totam voluptate beatae temporibus, alias quia odio eius minima corporis molestias ab excepturi recusandae cupiditate dolor doloribus labore sapiente quibusdam, ipsam ratione. Totam.

Quam reiciendis, eveniet. Dicta accusamus blanditiis labore excepturi vero eos iste esse ab quasi corporis nobis magnam, iusto aliquam sequi hic ullam. Accusamus unde voluptatem veritatis, voluptates! Incidunt ducimus, harum.

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

background: url(‘img/background/bg.jpg’) 0 0 no-repeat local;

background-image: url(‘img/background/bg.jpg’); background-repeat: no-repeat; background-position: 0 0; background-attachment: local;

Background-size

Масштабирует фоновое изображение согласно заданным размерам. В цифрах, где первое значение (проценты, px) определяет ширину, второе — высоту. Либо специальным значением.

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

В этом учебнике мы уже рассмотрели с вами такие аспекты работы с изображениями как использование свойств границ (цвет, стиль и толщина), научились задавать тень для изображений (Статья «Тень элемента в CSS»), рассмотрели, как можно создать эффект рамки, добавив задний фон и пустой промежуток между границей и изображением (Статья «Блочная и строчная модель в CSS»). Научились делать изображения плавающими (Статья «Плавающие элементы в CSS») и позиционировать их относительно краев родительского элемента, научились управлять внешними отступами между элементами, но всего этого пока не достаточно.

Для того чтобы Вы смогли создавать по настоящему красочные, яркие и уникальные сайты, вам необходимо познакомиться и изучить методы работы с задним фоном и с таким свойством как background-image, которое позволяет задать одно или несколько фоновых изображений для элемента.

Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.

В настоящее время браузеры работают с тремя графическими форматами:

• GIF (англ. Graphics Interchange Format — формат для обмена изображениями).
• JPEG (англ. Joint Photographic Experts Group — название организации-разработчика).
• PNG (англ. Portable network graphics — растровый формат хранения графической информации).

Чтобы задать изображение в качестве заднего фона необходимо использовать свойство background-image и указать путь к файлу изображения, который может быть как относительный, так и абсолютный:

селектор  background-image: url(images/main_bg.png); > 

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

Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента :

   Пример установки изображения в качестве фона body  background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ background-color: white; /* задаем задний фон для элемента */ >   

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

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

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

Управление повтором фонового изображения

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

Это свойство имеет следующие доступные значения:

Значение	Описание
repeat	Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-x	Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y	Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat	Фоновое изображение не будет повторяться.

Для следующего примера используем задний фон, который представляет из себя два разноцветных квадрата размером 10 на 10 пикселей.

   Пример управления повтором фонового изображения body  background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ > div  display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ width: 200px; /* устанавливаем ширину элемента */ height: 200px; /* устанавливаем высоту элемента */ border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */ margin-right: 10px; /* устанавливаем внешние отступы справа */ text-align: center; /* выравниваем текст по центру */ line-height: 200px; /* задаем высоту строки */ background-color: azure; /* указываем цвет заднего фона*/ > .noRepeat  background-repeat: no-repeat; /* фоновое изображение не будет повторяться. */ > .repeatX  background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */ > .repeatY  background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */ >  Значение repeat для body (по умолчанию) class = "noRepeat">no-repeat class = "repeatX">repeat-x class = "repeatY">repeat-y  

• Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat ), это значение чаще всего используется в работе.
• Второй блок получил значение repeat-x , которое определяет, что фоновое изображение будет дублироваться по горизонтали.
• Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y ).

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

Управление позицией фонового изображения

По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:

Значение	Описание
left top left center left bottom right top right center right bottom center top center center center bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

   Пример позиционирования фонового изображения div  display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ background-repeat: no-repeat; /**/ width: 100px; /* устанавливаем ширину элемента */ height: 100px; /* устанавливаем высоту элемента */ border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */ margin: 10px; /* устанавливаем внешние отступы со всех сторон */ text-align: center; /* выравниваем текст по центру */ line-height: 60px; /* указываем высоту строки */ background-color: azure; /* задаем цвет заднего фона */ > .leftTop background-position: left top;> /* задаем позицию ключевыми словами */ .leftCenter background-position: left center;> /* задаем позицию ключевыми словами */ .leftBottom background-position: left bottom;> /* задаем позицию ключевыми словами */ .rightTop background-position: right top;> /* задаем позицию ключевыми словами */ .rightCenter background-position: right center;> /* задаем позицию ключевыми словами */ .rightBottom background-position: right bottom;> /* задаем позицию ключевыми словами */ .centerTop background-position: center top;> /* задаем позицию ключевыми словами */ .centerCenter background-position: center center;> /* задаем позицию ключевыми словами */ .centerBottom background-position: center bottom;> /* задаем позицию ключевыми словами */ .userPosition background-position: 20px 75%;> /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */  class = "leftTop">left top class = "leftCenter">left center class = "leftBottom">left bottom class = "rightTop">right top class = "rightCenter">right center class = "rightBottom">right bottom class = "centerTop">center top class = "centerCenter">center center class = "centerBottom">center bottom class = "userPosition">20px 75%  

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

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

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

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

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

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

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

Свойства CSS 3 для работы с фоновыми изображениями

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

И первое CSS свойство, которое мы рассмотрим — background-origin, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.

Возможные значения этого свойства:

Значение	Описание
padding-box	Фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
border-box	Фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента).
content-box	Фоновое изображение позиционируется от верхнего левого угла содержимого элемента.

Рассмотрим применение этого свойства:

   Пример использования свойства background-origin div  width: 10em; /* устанавливаем ширину элемента */ height: 10em; /* устанавливаем высоту элемента */ border: 5px dashed orange; /* устанавливает пунктирную границу размером 5px оранжевого цвета */ background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */ display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ margin-right: 15px; /* устанавливаем величину внешнего отступа от правого края элемента */ padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */ color: yellow; /* устанавливаем цвет шрифта желтый */ > .test background-origin: padding-box;> /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон) */ .test2 background-origin: border-box;> /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента) */ .test3 background-origin: content-box;> /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла содержимого элемента */  class = "test">padding-box class = "test2">border-box class = "test3">content-box  

В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:

• Первый блок ( padding-box ) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
• Второй блок ( border-box ) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
• Третий блок ( content-box ) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).

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

И так на очереди следующее CSS свойство — background-clip, оно определяет ту область элемента, для которой будет задан задний фон.

У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin и background-clip ?

Разница заключается в том, что свойство background-clip в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.

В таблице представлены возможные значения этого свойства:

Значение	Описание
border-box	Фон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию.
padding-box	Фон элемента занимает все пространство (не включая границ элемента).
content-box	Фон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено).

Давайте рассмотрим следующий пример:

   Пример использования свойства background-clip div  width: 10em; /* устанавливаем ширину элемента */ height: 9em; /* устанавливаем высоту элемента */ background-image: url(medved.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ border: 5px dashed yellow; /* устанавливает пунктирную границу размером 5px черного цвета */ display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ margin-right: 10px; /* устанавливаем величину внешнего отступа от правого края элемента */ padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */ > .test background-clip: border-box;> /* устанавливаем, что фон элемента занимает все пространство (включая границы элемента) */ .test2 background-clip: padding-box;> /* устанавливаем, что фон элемента занимает все пространство (не включая границы элемента) */ .test3 background-clip: content-box;> /* устанавливаем, что фон элемента занимает все содержимое элемента */  class = "test">border-box class = "test2">padding-box class = "test3">content-box  

В этом примере мы разместили три блока, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:

• Первый блок ( padding-box ) — фон элемента занимает все пространство. Это значение по умолчанию.
• Второй блок ( border-box ) — фон элемента занимает все пространство (не включая границы элемента).
• Третий блок ( content-box ) — фон элемента занимает все содержимое элемента.

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

Как вы могли заметить свойства background-origin и background-clip , имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

На очереди следующее свойство, которое позволит нам в полной мере управлять задним фоном элемента по своему усмотрению — это свойство background-size, оно имеет широкое применение в современной верстке сайтов, так как позволяет управлять размером фонового изображения.

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

Значение	Описание
auto	Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
length	Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto .
%	Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto .
cover	Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
contain	Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Рассмотрим применение этого свойства:

   Пример масштабирования фоновых изображений div  width: 8em; /* устанавливаем ширину элемента */ height: 8em; /* устанавливаем высоту элемента */ border: 3px solid orange; /* устанваливаем сплошную границу размером 3 пикселя оранжевого цвета */ background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */ background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */ display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */ 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;> /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */  class = "test">auto class = "test2">100px 100px class = "test3">70% 70% 
class = "test4">cover class = "test5">contain  

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

• Первый блок ( auto ) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
• Второй блок ( 100px 100px ) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
• Третий блок ( 70% 70% ) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
• Четвертый блок ( cover ) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
• Пятый блок ( contain ) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

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

Универсальное свойство 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  height: 100%; /* устанавливаем высоту элементов */ width: 100%; /* устанавливаем ширину элементов */ margin: 0; /* убираем внешние отступы элемента */ padding: 0; /* убираем внутренние отступы элемента */ > header  width: 100%; /* устанавливаем ширину элемента */ min-height: 34%; /* устанавливаем минимальную высоту элемента */ background: white url('cat_g.jpg') bottom/cover no-repeat; /* указываем цвет заднего фона, фоновое изображение, позицию/масштабируем под размеры элемента, фон не повторяется */ > .primer2  width: 100%; /* устанавливаем ширину элемента */ min-height: 66%; /* устанавливаем минимальную высоту элемента */ background: url('lis.png') top/contain no-repeat, url('cat_g.jpg') bottom/cover no-repeat; /* Обратите внимание, что значения для различных изображений указываются через запятую */ /* Путь к изображению 1 позиция/масштаб повтор, Путь к изображению 2 позиция/масштаб повтор */ >  
class = "primer2">
   

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

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

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

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

• Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:

• Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):

  

  Практическое задание № 28. Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков. Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

  Плавающие элементы
  CSS функции. Часть 1

  © 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

  Кажется, вы используете блокировщик рекламы 🙁

  Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

  Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

  Как установить картинку на задний фон страницы: простые шаги с помощью CSS

  Разнообразие дизайнерских техник можно использовать для оформления сайта и улучшения визуального восприятия. Один из самых популярных способов оформления заднего фона страницы — это установка картинки. Это один из способов добавить красоты и эффективности к более плоскому и обычному макету сайта.

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

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

  Важность понимания синтаксиса CSS

  CSS (Cascading Style Sheets) — это язык, который используется для определения внешнего вида веб-страниц. Он позволяет задавать цвета, шрифты, отступы, фоны, границы и другие свойства элементов HTML. Поэтому понимание синтаксиса CSS является необходимым навыком для создания красивых и удобных сайтов.

  Основой синтаксиса CSS являются правила. Каждое правило состоит из селектора и свойств. Селектор — это элемент HTML, который мы хотим стилизовать, а свойства — это набор правил, которые будут применены к этому элементу.

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

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

  Также следует учитывать приоритетность свойств. Если для одного элемента задано несколько правил с разными значениями свойств, то будет применено то правило, которое имеет более высокий приоритет. Приоритетность свойств определяется при помощи весов и каскадности.

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

  Подготовка изображения

  Выбор изображения

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

  Обработка изображения

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

  Еще по теме: Подключение локальных шрифтов в CSS по шагам: как сделать правильно

  Оптимизация изображения

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

  Выбор метода установки фона

  Для того чтобы задать фоновое изображение на странице, существует несколько способов. Один из них – это использование свойства background-image в селекторе CSS для выбора изображения из файловой системы или указания его URL-адреса.

  Еще одним методом может быть использование тега в HTML разметке, но он не столь эффективен, как использование свойства background-image, так как данный тег менее гибок и не позволяет установить большое изображение на задний фон страницы.

  Кроме того, для того чтобы фоновое изображение было правильно отображено, следует не забыть задать необходимые свойства background-size, background-repeat и background-position в CSS коде. Например, свойство background-repeat позволяет указать, как будет повторяться фоновое изображение на странице, а свойство background-size определяет размер изображения.

  • background-image – свойство CSS для определения фонового изображения.
  • – тег HTML для вставки изображения.
  • background-size – свойство CSS для определения размера фонового изображения.
  • background-repeat – свойство CSS для указания повторения фонового изображения.
  • background-position – свойство CSS для определения положения фонового изображения на странице.

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

  Использование свойства background-image

  Когда вам нужно установить картинку на задний фон страницы, вы можете использовать свойство background-image в CSS. Это позволяет задать URL-адрес изображения в качестве фона элемента страницы.

  Чтобы использовать свойство background-image, вам необходимо указать URL-адрес изображения в CSS-правилах для элемента, который вы хотите стилизовать. Например, вы можете использовать следующий код:

  Этот код устанавливает картинку с именем «image.jpg» в качестве фона для элемента div. Вы можете использовать путь к файлу изображения относительно текущей страницы или абсолютный путь.

  Кроме того, вы можете использовать дополнительные свойства, такие как background-repeat и background-size, чтобы настроить повторение изображения и его размеры на фоне элемента.

  Теперь вы знаете, как использовать свойство background-image, чтобы установить картинку на задний фон страницы. Это простой и эффективный способ добавить визуальный интерес к вашему дизайну веб-страницы.

  Использование свойств background-repeat и background-position

  Чтобы задний фон страницы выглядел эстетично и сбалансировано, необходимо правильно использовать свойства CSS. Одним из таких свойств является background-repeat.

  Данное свойство контролирует повторяемость фоновой картинки на странице. Допустимыми значениями являются: repeat (повторение по горизонтали и вертикали), repeat-x (повторение только по горизонтали), repeat-y (повторение только по вертикали) и no-repeat (без повторения).

  Также, для более точного размещения фона на странице существует свойство background-position. Оно позволяет задать положение фоновой картинки относительно верхнего и левого края элемента. Допустимыми значениями являются ключевое слово center, а также единицы измерения пикселей, процентов, em и др.

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

  • Значение background-repeat можно задать для элемента body вот так:
    body
  • Для элемента с задним фоном, можно задать его позиционирование относительно других элементов:
    div

  Использование свойства background-size

  Свойство background-size позволяет задавать размеры фонового изображения. Это может быть полезно, если размер изображения не точно соответствует размерам заднего фона или если вы хотите изменить размер изображения в зависимости от размера окна браузера.

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

  Еще по теме: CSS анимация при наведении: плавное изменение цвета. Просто и эффективно

  Пример использования свойства background-size:

  background-size: cover; /* полностью покрывает фон */ background-size: contain; /* вписывает в фон */ background-size: 50% auto; /* половина ширины фона и автоматическая высота */ background-size: 1024px 768px; /* заданные пиксели */

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

  Использование сокращенного свойства background

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

  Чтобы задать свойство background с картинкой, нужно указать путь к файлу изображения с помощью параметра url, например: background: url(‘images/background.jpg’). Кроме того, можно задать параметры повторения изображения (background-repeat), его положение (background-position) и наложение цвета фона (background-color).

  Также можно использовать сокращенный вариант записи свойства background, например: background: #ffffff url(‘images/background.jpg’) no-repeat center top;. В этом случае задаются сразу все параметры: цвет фона (#ffffff), путь к изображению (url(‘images/background.jpg’)), отключение повторения изображения (no-repeat) и положение изображение по центру вертикали и горизонтали (center top).

  Использование сокращенного свойства background позволяет быстро и удобно настроить задний фон страницы с помощью минимального количества кода.

  Добавление эффектов фона через свойство background

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

  • Изображение — вы можете установить изображение в качестве фона на вашей веб-странице. Для этого нужно воспользоваться свойством background-image и указать путь к изображению.
  • Повторение — если изображение фона маленькое, то его можно повторить, чтобы заполнить всю область заднего фона. Для этого нужно воспользоваться свойством background-repeat и установить значение repeat или repeat-x/repeat-y.
  • Позиция — вы можете задать позицию фона на странице. Для этого нужно воспользоваться свойством background-position и указать горизонтальную и вертикальную позицию.
  • Размер — вы можете задать размер фона на странице. Для этого нужно воспользоваться свойством background-size и указать значение width и/или height.

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

  Использование фоновых изображений в блоках

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

  Для установки фонового изображения в блоке контента необходимо задать свойство background-image в соответствующем CSS-правиле. Например:

  .block

  В данном примере, мы использовали изображение «image.jpg» для фона блока с классом «block». Свойство background-size устанавливает размер изображения в блоке, background-position задает позиционирование изображения на заднем фоне, а background-repeat определяет, повторять ли изображение по горизонтали и вертикали.

  Помимо этого, можно использовать значение transparent для свойства background-color, чтобы сделать прозрачный фоновый блок с фоновым изображением:

  .block

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

  Как использовать медиазапросы для адаптивности фона

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

  Еще по теме: Как избежать проблем с body при открытом меню в CSS

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

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

  @media (max-width: 768px) < body < background-image: url(bg-mobile.jpg); >>

  В этом примере мы задаем изображение bg-mobile.jpg на задний фон страницы для устройств с шириной экрана не более 768 пикселей.

  Использование медиазапросов для адаптивности фона позволяет вашему сайту выглядеть идеально на любом устройстве и делает его более привлекательным для пользователей.

  Оптимизация фоновых изображений для сайта

  Размер и формат изображения

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

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

  Компрессия изображений

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

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

  Правильное размещение фоновых изображений

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

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

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

  Вопрос-ответ:

  Какая картинка подходит для использования в качестве заднего фона страницы?

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

  Могу ли я использовать фотографию в качестве заднего фона страницы?

  Да, конечно. Но лучше всего выбирать фотографии, которые легко смешиваются с другими элементами дизайна, не отвлекают от контента и не создают эффекта «перегруженности».

  Как убрать повторение картинки на заднем фоне страницы?

  Для этого нужно использовать свойство background-repeat с значением no-repeat. Таким образом, задний фон будет отображаться единожды, без повторов.

  Как изменить положение картинки на заднем фоне страницы?

  Для изменения расположения картинки на заднем фоне страницы нужно использовать свойство background-position. Например, если хотите поместить картинку в верхний левый угол, используйте значение left top.

  Могу ли я использовать CSS-анимацию для заднего фона страницы?

  Да, можно использовать CSS-анимацию для заднего фона. Например, в CSS3 добавлена возможность использования анимации для свойства background-image, что позволяет создавать динамические и эффектные задние фоны.

  Похожие публикации:

  1. Как задаются массивы в mathcad
  2. Как посчитать оклад в excel
  3. Как разобрать крышку чайника braun
  4. Что такое ориентация в телефоне xiaomi redmi