"background-size cover" для блока

[dartVader]

Добрый день!

 

Подскажите, как реализовать следующую задачу:

 

Необходимо, что бы в блоке .content было фиксированное фоновое изображение (картинка) с максимальным заполнением, прижатая к правому краю .content

<div class="container-fluid">    <div class="col-xs-7 content">        контент    </div>    <div class="col-xs-5">        навигация    </div></div>

.content {    background: url("background.jpg") no-repeat right top fixed;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;} 

Если делаю, как приведено в коде, картинка растягивается по ширине body.

 

Существует ли какое-то изящное правильное решение? 

 

Спасибо.

[klierik]

  On 2/27/2016 at 3:35 PM, dartVader said:

Необходимо, что бы в блоке .content было фиксированное фоновое изображение (картинка) с максимальным заполнением, прижатая к правому краю .content

  On 2/27/2016 at 3:35 PM, dartVader said:

Если делаю, как приведено в коде, картинка растягивается по ширине body.

 

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

[dartVader]

  On 2/27/2016 at 4:50 PM, klierik said:

 

  On 2/27/2016 at 3:35 PM, dartVader said:

Необходимо, что бы в блоке .content было фиксированное фоновое изображение (картинка) с максимальным заполнением, прижатая к правому краю .content

 

 

  On 2/27/2016 at 3:35 PM, dartVader said:

Если делаю, как приведено в коде, картинка растягивается по ширине body.

 

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

 

Скорее всего, путано объяснился.  Необходимо получить такой результат _http://modernview.pro/В случае с этим сайтом, каждая фоновая картинка подгоняется в фотошопе.

[by chris]

@dartVader, http://modernview.pro/images/page/index/index-background.jpg 

[dartVader]

  On 2/27/2016 at 7:42 PM, by chris said:

@dartVader, http://modernview.pro/images/page/index/index-background.jpg

Да, я видел. Фон "шаманится" фотошопом. Задачу, также, можно через jquery с кучей условий реализовать. Существует ли, на сегодняшний день, изящный способ решения через CSS?

[by chris]

.content {

background-image: url("background.jpg";

background-attachment: fixed;

background-position: left center;

background-repeat: no-repeat;

background-size: calc(100% - 41.66666667%) 100%;

}

[dartVader]

  On 2/27/2016 at 8:17 PM, by chris said:

.content {  background-image: url("background.jpg";  background-attachment: fixed;  background-position: left center;  background-repeat: no-repeat;  background-size: calc(100% - 41.66666667%) 100%;} 

Спасибо, но при таком подходе, при изменении разрешения экрана картинка не подрезается

[klierik]

Выложи на http://jsfiddle.net/(об этом говорилось в правилах при регистрации) проблему. Я не совсем понимаю постановку задачи

[dartVader]

  On 2/28/2016 at 12:19 PM, klierik said:

Выложи на http://jsfiddle.net/(об этом говорилось в правилах при регистрации) проблему. Я не совсем понимаю постановку задачи

https://jsfiddle.net/dartVader/pk90pqej/1/

 

Фоновое изображение должно быть вписано в блок .content c выравниванием по правому краю, со 100% пропорциональным заполнением. Блок .sidebar изменяется, в зависимости от ширины монитора.

Edited February 28, 2016 by dartVader

[by chris]

@dartVader,

https://jsfiddle.net/6t66z8ww/show/

[dartVader]

  On 2/28/2016 at 4:38 PM, by chris said:

@dartVader,

https://jsfiddle.net/6t66z8ww/show/

 

Спасибо, но слон сжимается, а не изменяется пропорционально.. 

 

http://savepic.ru/8805341.png

 

Необходимо, что бы его хобот прятался под левую часть экрана. 

Edited February 28, 2016 by dartVader