Адаптивные css фоновые изображения


197

У меня есть веб-сайт (g-floors.eu), и я хочу, чтобы фон (в css я определил bg-изображение для контента) также был адаптивным. К сожалению, я действительно не имею ни малейшего представления о том, как это сделать, кроме одной вещи, о которой я могу думать, но это довольно обходной путь. Создание нескольких изображений и затем использование размера экрана CSS для изменения изображений, но я хочу знать, есть ли более практичный способ для достижения этого.

По сути, я хочу добиться того, чтобы изображение (с водяным знаком «G») автоматически изменяло размеры, не отображая меньше изображения. Если возможно конечно

ссылка: g-floors.eu

Код у меня пока (содержательная часть)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

7
Посмотрите на эту ссылку, это может быть то, что вы ищете? css-tricks.com/perfect-full-page-background-image
Кристофер Виландер

Я чувствую, что это решение, которое опубликовал Кристофер Виландер, является лучшим решением, чем выбранный ответ.
CU3ED

Просто интересно, почему на самом деле на сайте не реализована функция изменения размера, о которой вы спрашивали, по состоянию на февраль 2015 года? Была ли какая-то проблема с этим?
LegendLength

Ответы:


371

Если вы хотите, чтобы одно и то же изображение масштабировалось в зависимости от размера окна браузера:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Не устанавливайте ширину, высоту или поля.

РЕДАКТИРОВАТЬ: Предыдущая строка о не задании ширины, высоты или поля относится к первоначальному вопросу OP о масштабировании с размером окна. В других случаях вы можете при желании установить ширину / высоту / поля.


3
Можно ли автоматически изменить ширину и разрешить фиксировать высоту?
Йохемке

3
Да, вы можете установить высоту изображения в пикселях и ширину в процентах, но изображение будет удалено. Это не выглядит красиво.
Андрей Волгин

2
Вы можете использовать изображение намного меньшего размера, если используете векторный формат: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
Андрей Волгин,

9
Какой? Не устанавливая ширину, высота контейнера не будет отображать изображение вообще.
снег

3
(1) Первоначальный вопрос касался масштабирования в зависимости от размера окна браузера. (2) Элементы, например, divполучают собственную высоту из своего содержимого или занимают свободное место в модели flexbox. Сказать, что без явной ширины / высоты контейнер вообще не будет отображаться, неверно. Очевидно, что если вы хотите отобразить пустой div с фоновым изображением, вам нужно будет установить высоту и, возможно, ширину, но тогда вы увидите только часть изображения, если соотношение сторон не будет таким же, как у само изображение.
Андрей Волгин

70

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

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

При размере экрана 800x1280 пикселей изображение обрезается с правой стороны рамкой. Все остальные размеры кажутся нормальными.
Mugé

52

Попробуй это :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

33

CSS:

background-size: 100%;

Это должно делать свое дело! :)


27
Это будет полностью искажать изображение в зависимости от соотношения сторон окна браузера. Никогда не делай этого.
Андрей Волгин

8
Просто для дальнейшего использования, на самом деле это не будет выглядеть плохо. background-size: 100% - 100%, но объявление только x как 100% не дает ему выглядеть ужасно. Тестовый пример: codepen.io/howlermiller/pen/syduB
Тимоти Миллер,

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

1
Так будет принятый ответ. ОП не спрашивал об этой проблеме, просто можно ли было сделать так, чтобы она хорошо изменила размеры.
Тимоти Миллер

1
Это решение исправило мою проблему. +1
Jpeg

22

Вот sass mixin для адаптивного фонового изображения, которое я использую. Это работает для любого blockэлемента. Конечно, то же самое может работать в простом CSS, который вам нужно будет рассчитать paddingвручную.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

Пример http://jsfiddle.net/XbEdW/1/


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

15

Это легко =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

Взгляните на демоверсию jsFiddle


13

Вот лучший способ, который я получил.

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

Проверьте на w3schools

Больше доступных вариантов

background-size: auto|length|cover|contain|initial|inherit;

9

я использовал

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

который работал очень хорошо.


Это код, который мне был нужен! Спасибо :)) Я пытаюсь сделать параллакс на 100% экрана, но на высоте 200 пикселей, и мне нужна только верхняя часть фона, но с сохранением пропорций всего изображения.
thinklinux

8
#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

6

Адаптивный веб-сайт, добавив отступ в нижнюю часть изображения высота / ширина x 100 = отступ-нижний%:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/


Более сложный метод:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios


Попробуйте изменить размер фона, например Firefox Ctrl + M, чтобы увидеть волшебный красивый скрипт, который я считаю лучшим:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content


4

Вы можете использовать это. Я проверил и работает на 100% правильно:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

Вы можете проверить свой веб-сайт с отзывчивостью в этом симуляторе размера экрана: http://www.infobyip.com/testwebsiteresolution.php

Очистите кэш каждый раз, когда вы вносите изменения, и я бы предпочел использовать Firefox для его проверки.

Если вы хотите использовать изображение из другого сайта / URL, а не как: background-image:url('../images/bg.png'); // Эта структура должна использовать изображение с вашего собственного размещенного сервера. Тогда используйте как это: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Наслаждаться :)


4

Если вы хотите, чтобы все изображение отображалось независимо от соотношения сторон, попробуйте следующее:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

Это покажет все изображение независимо от размера экрана.


3
    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>


2

Адаптивный для квадратного соотношения с JQuery

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

2
background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

или

background-size:100%;

0

Я думаю, лучший способ сделать это так:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

Таким образом, не нужно больше ничего делать, и все довольно просто.

По крайней мере, у меня это работает.

Я надеюсь, что это помогает.


0

Попробуйте использовать, background-sizeно используя два аргумента: один для ширины, а другой для высоты.

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

0
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.