Чуйні фонові зображення css


196

У мене є веб-сайт (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
Christofer

Я вважаю, що це рішення, яке опублікував Крістофер Віландер, є кращим рішенням, ніж обрана відповідь.
CU3ED

Цікаво, чому сайт фактично не реалізує цю функцію зміни розміру, про яку ви питали, станом на лютий 2015 року? Чи було з цим якесь питання?
LegendLength

Відповіді:


371

Якщо ви хочете масштабувати те саме зображення, залежно від розміру вікна браузера:

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

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

РЕДАКТУВАННЯ: Попередній рядок про невстановлення ширини, висоти чи запасу стосується початкового питання ОП щодо масштабування за розміром вікна. В інших випадках використання, якщо потрібно, ви можете встановити ширину / висоту / поля.


3
Чи можна також автоматично змінити розмір ширини і дозволити фіксувати висоту?
jochemke

3
Так, ви можете встановити висоту зображення в пікселях і ширину в відсотках, але зображення буде знищене. Це не буде виглядати приємно.
Андрій Волгін

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

9
Що? Якщо не встановити ширину, висоту контейнера, зображення взагалі не відображатиметься.
сніг

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

69

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

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

При розмірі екрана 800x1280px зображення відрізається у правій частині поля. Усі інші розміри здаються прекрасними.
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
Тільки для подальшої довідки це насправді не буде виглядати погано таким чином. фоновий розмір: 100% 100% було б, але декларація лише x як 100% не дозволяє виглядати жахливо. Тестовий випадок: codepen.io/howlermiller/pen/syduB
Тімоті Міллер

1
він не виглядатиме «спотвореним», але розтягне зображення за межею його передбачуваних пропорцій, якщо він буде меншим, ніж контейнер ...
Code 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/


код у скрипці (використовує рамку) відрізняється від коду у відповіді.
сніг

14

Це просто =)

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;

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.