CSS: изменение размера фонового изображения, а не отсечение

Я использую javascript для изменения размера div при изменении размера браузера и его первоначальной установки при загрузке страницы. (Да, я знаю, что он должен деградировать изящно.) Причина, по которой я не могу сделать все это через CSS, состоит в том, что в верхней части экрана есть фиксированная панель навигации с постоянной высотой, которая должна быть принята во внимание. Я хочу изменить размер div (и его градиентный фон), чтобы он соответствовал окну браузера, но когда я изменяю свойство высоты CSS, он просто сокращает изображение, а не изменяет его размер, что означает, что следующий раздел страницы не будет правильно переходить. Есть ли в этом легкое решение?CSS: изменение размера фонового изображения, а не отсечение

Вот CSS я использую прямо сейчас:

#homepage_aboutstrip { 
     background-image:url('home/images/gradient-about-background.png'); 
     background-repeat:repeat-x; 
     position:absolute; 
     margin-top:0px; 
     width:100%; 
     height:1050px; 
     z-index:1; 
    }

А с помощью тегов IMG, а не фона изображения будет работать, очевидно, но это не вариант здесь.

источник

2013-04-21 Mr. Lavalamp

Почему бы не использовать градиенты CSS3? –

В этом случае более эффективно использовать легкое изображение, потому что градиент был очень тщательно изменен. В идеальном мире я мог бы использовать эти градиенты, но у нас есть график, чтобы придерживаться. ;) –

Вы можете сделать это с помощью одной строки css. попробовать это, если он работает

background-image:url('home/images/gradient-about-background.png'); 
background-size: cover

Качество изображения может быть нарушено, если он расширяется слишком много

источник

2013-04-21 16:54:53 Sikander

Ангелы поют, друг мой. Ну, вроде. Он не будет работать для IE8, но, по крайней мере, это шаг. Благодаря! –

http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie – cimmanon

Это работает для меня на IE7, а также.

background: url(../img/url.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
     background-size: cover; 
background-position: 0 40px; /* Only if you want clip out space for fixed navbar */

источник

2013-04-21 17:02:54

CSS: изменение размера фонового изображения, а не отсечение

ответ

Смежные вопросы