Воспроизводимые фоновые изображения css

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

Попробуйте следующее:

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

Ответ 4

CSS

background-size: 100%;

Это должно сделать трюк!:)

Ответ 5

Здесь используется 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/

Ответ 6

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

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

Проверьте w3schools

Дополнительные параметры

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

Ответ 7

Это простой =)

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

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

Ответ 8

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

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

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

Ответ 9

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

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

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

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

Вы можете использовать это. Я тестировал и работаю на 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) ;

Наслаждайтесь:)

Ответ 13

    <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>

Ответ 14

Просто две строки кода, он работает.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

Ответ 15

Адаптивное для квадратного отношения с 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");
    }

Ответ 16

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

или

background-size:100%;

Ответ 17

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

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

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

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

Надеюсь, это поможет.