У меня
body {
background: url(images/background.svg);
}
Желаемый эффект заключается в том, что это фоновое изображение будет иметь ширину, равную ширине страницы, а высота будет меняться для сохранения пропорции. Например, если исходное изображение имеет размер 100*200 (любые единицы измерения), а ширина тела составляет 600px, то фоновое изображение должно иметь высоту 1200px. Высота должна меняться автоматически при изменении размера окна. Возможно ли это?
На данный момент Firefox выглядит так, как будто он подгоняет высоту, а затем подгоняет ширину. Возможно, это происходит потому, что высота является самым длинным измерением, и он пытается избежать обрезки? Я хочу обрезать вертикально, затем прокрутить: без горизонтального повтора.
Кроме того, Chrome помещает изображение в центр, без повтора, даже если явно задано background-repeat:repeat
, что в любом случае является значением по умолчанию.
Для этого существует свойство CSS3, а именно background-size
(проверка совместимости). Хотя можно задать значение длины, оно обычно используется со специальными значениями contain
и cover
. В вашем конкретном случае следует использовать cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
и cover
.Извините за неудачный каламбур, но я собираюсь использовать [картинку дня от Biswarup Ganguly] (https://commons.wikimedia.org/wiki/File:Chicken_Egg_without_Eggshell_5859.jpg) для демонстрации. Предположим, что это ваш экран, а серая область находится за пределами видимого экрана. Для демонстрации я приму соотношение 16x9.
Мы хотим использовать вышеупомянутую фотографию дня в качестве фона. Однако по какой-то причине мы обрезали изображение до 4x3. Мы могли бы установить свойство background-size
на некоторую фиксированную длину, но мы сосредоточимся на contain
и cover
. Обратите внимание, что я также предполагаю, что мы не изменяли ширину и/или высоту body
.
contain
содержать Масштабирует изображение, сохраняя присущее ему соотношение сторон (если оно есть), до наибольшего размера, чтобы его ширина и высота поместились в области позиционирования фона.
Это гарантирует, что фоновое изображение всегда полностью содержится в области позиционирования фона, однако в этом случае может остаться некоторое пустое пространство, заполненное вашим background-color
:
cover
cover Масштабируйте изображение, сохраняя присущее ему соотношение сторон (если оно есть), до наименьшего размера, чтобы его ширина и высота полностью покрывали область позиционирования фона.
Это гарантирует, что фоновое изображение покрывает все. Не будет видно цвет фона
, однако в зависимости от соотношения сторон экрана большая часть изображения может быть обрезана:
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Основываясь на советах с сайта https://developer.mozilla.org/en-US/docs/CSS/background-size, я пришел к следующему рецепту, который сработал для меня.
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Я не знаю, что именно вы ищете, но вам стоит ознакомиться с этими замечательными статьями, написанными Крисом Койером из CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Прочитайте описания к каждой из статей и посмотрите, не являются ли они тем, что вы ищете.
Первая отвечает на следующий вопрос:
Есть ли способ сделать фоновое изображение изменяемым по размеру? Например, заполнить фон веб-страницы от края до края изображением, независимо от размера окна браузера. Кроме того, чтобы при изменении размера окна браузера оно увеличивалось или уменьшалось. Кроме того, убедитесь, что изображение сохраняет свое соотношение (не растягивается). Кроме того, не вызывает полос прокрутки, просто обрезается по вертикали, если это необходимо. Кроме того, вставляется на страницу как тег inline .
Цель второго поста 'получить следующее, "фоновое изображение на сайте, которое постоянно закрывает все окно браузера"
Надеюсь, это поможет.
Попробуйте это,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
Просто добавьте эту строку:
.your-class {
height: 100vh;
}
ВХ-высота вьюпорта. Это позволит автоматически масштабировать, чтобы соответствовать устройство' окне браузера.
Проверьте еще здесь: https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window?rq=1
Фоновое изображение не идеально, то его CSS является проблема создания так его CSS-файл изменить ниже код
в
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
в
я %; фон-размер: 100% 100%;&;
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
У меня была такая же проблема, можете изменить размер изображения при изменении размеров браузера.
Плохой код:<БР><БР>
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
<БР>
Хороший код:<БР><БР>
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
Ключевым моментом здесь является добавление этого элемента -> фон-размер: содержать;
Здесь's что работал для меня:
background-size: auto 100%;
Настройка размера фона не поможет, следующее решение работает для меня:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
Это в основном обрезка изображения и делает его вписываются в фон-размер: содержать/крышка до сих пор не'т сделать его пригодным.