Background css растянуть: Как растянуть фон на всю ширину окна?

 

    
    
    <дел>
        другой код
    

И CSS пока:

# заголовок {
    высота: 130 пикселей;
    поля: 5px 5px 0 5px;
    граница: #0f0f12 начало 2px;
    радиус границы: 15px;
}
#loginBox {
    поплавок: справа;
    ширина: 23,5%;
    высота: 128 пикселей;
    размер шрифта: 75%;
}
.headerBg {
}
.лого {
    ширина: 50%;
    высота: 120 пикселей;
    плыть налево;
    дисплей: блок;
    отступ: 5px;
}
 

Я пытаюсь сделать так, чтобы изображение «headerBg.

Логотип должен располагаться в крайнем левом углу, а поле входа в систему — в крайнем правом углу, как в css.

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

Я пробовал различные дополнения и реконфигурации, но ни один из них не работал так, как я хочу.

Я добавил изображение в css в качестве фона в div заголовка, но оно не растягивается на 100% таким образом, если вы не прибегаете к css3, чего я не хочу делать, хотя это именно то, чего я пытаюсь достичь.

Кто-нибудь может что-нибудь сказать по этому поводу?

Любые уроки, посвященные подобным вещам, были бы отличным дополнением к моей коллекции!

Спасибо!

Крис Апджон 15 апреля 2012 г. , 12:47

#2

Посмотрите, как это работает для вас

 #header {
    граница: #0f0f12 начало 2px;
    радиус границы: 15px;
    высота: 130 пикселей;
    поля: 5px 5px 0 5px;
    положение: родственник;
}
#loginBox {
    поплавок: справа;
    размер шрифта: 75%;
    высота: 128 пикселей;
    ширина: 23,5%;
}
.headerBg {
    высота: 130 пикселей;
    слева: 0;
    положение: абсолютное;
    сверху: 0;
    ширина: 100%;
}
.лого {
    дисплей: блок;
    плыть налево;
    высота: 120 пикселей;
    отступ: 5px;
    ширина: 50%;
}
 

система закрыто 8 октября 2014 г., 2:16

#3

css stretch background image cover

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

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

Чтобы понять размеры, мы всегда будем брать положение изображения в качестве центра. Это можно изменить в зависимости от изображения.

Установка размера фона в полноэкранном окне.

Мы сделаем тело 100%, чтобы можно было использовать изображение. Вот как выглядит базовый HTML:

 

<голова>
<тело>
 

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

HTML, тело {
высота: 100%;
маржа: 0;
заполнение: 0;
}
тело{
фон: url(earhy-lady.jpg) центр без повторов;
} 

Это просто выведет изображение в теле. Не очень убедительно, верно?

Пример редактирования

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

 /* Изображение будет увеличено до полной ширины */
тело{
размер фона: обложка;
}
 

Редактировать пример

Мы можем подогнать его под высоту, изменив код следующим образом:

 /* Это изменит размер изображения до полной высоты */
тело{
размер фона: содержит;
} 

Пример редактирования

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

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

Фиксированный и процентный размер фонового изображения:

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

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

 /* Это изменит размер изображения на 400 пикселей по оси x и на 200 пикселей по оси y */
тело{
размер фона: 400 пикселей 200 пикселей;
} 

Пример редактирования

Это можно сделать как по оси X, так и по оси Y.

 /* Это изменит размер изображения на 400 пикселей по оси Y и на 200 пикселей по оси X */
тело{
размер фона: 200 пикселей 400 пикселей;
} 

Пример редактирования

Что, если мы хотим изменить размер фонового изображения внутри контейнера?

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

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

 /* Настройка базовой сетки */
.logo-контейнер {
дисплей: сетка;
сетка-столбец-шаблон: 1fr 1fr;
зазор сетки: 10px;
}
.лого{
размер фона: авто 70%;
} 

Этот размер подойдет, учитывая, что большинство логотипов имеют прямоугольное соотношение. Лужи с портретным размером будут обрезаны из-за размера в направлении x.

Пример редактирования

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

 .лого{
размер фона: 70% авто;
} 

Это приведет к следующему результату.

Пример редактирования

Фото Саджада Нори, Омида Армина на Unsplash
https://unsplash.com/photos/ceoOtd3U5zs
https://unsplash.com/photos/_8rh7LPA4mE

Подойдут ли эти размеры для адаптивных макетов?

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