Фоновое изображение

[Imperil]

Есть сайт фиксированной ширины.

Есть фон, который вставляется в body. И все бы хорошо, но фоновое изображение это с градиентом. Как сделать так, чтобы оно растягивалось на весь экран? Потому-что видно когда оно начинает повторяться по ширине

Или просто какой-то другой способ подскажите?

Тут чтобы понятнее было http://jsfiddle.net/H6zth/

Edited October 29, 2012 by Imperil

[mrnobody]

Добавьте:

background-size: 100%;

http://jsfiddle.net/H6zth/1/embedded/result/

Edited October 29, 2012 by mrnobody

[Imperil]

Добавьте:

background-size: 100%;

http://jsfiddle.net/H6zth/1/embedded/result/

На сколько я знаю - это не кроссбраузерно получается

[iDrugov]

Нельзя сделать изображение кроссбраузерно, в 100%. Но можно сделать так:

body
{
    padding: 0;
    margin: 0;
    background: -webkit-radial-gradient(center, circle cover, #fff 0%, #000 100%);
    background: -moz-radial-gradient(center, circle cover, #fff 0%, #000 100%);
    background: -ms-radial-gradient(center, circle cover, #fff 0%, #000 100%;
    background: -o-radial-gradient(center, circle cover, #fff 0%, #000 100%);
    background: radial-gradient(center, circle cover, #fff 0%, #000 100%);
}

Edited October 29, 2012 by iDrugov

[Alex Shnayder]

А вы уверены, что хотите растянуть изображение на весь экран? Это ведь смотрится ужасно.

Навскидку, есть следующие варианты:

1. Если градиент простой — использовать CSS-градиенты, предоставляя для старых браузеров упрощенную версию.

2. Воспользоваться свойством background-size, но оно, опять же, работает не везде.

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

4. Использовать костыль с элементом img вместо фоновой картинки.

[Imperil]

А вы уверены, что хотите растянуть изображение на весь экран? Это ведь смотрится ужасно.

Навскидку, есть следующие варианты:

1. Если градиент простой — использовать CSS-градиенты, предоставляя для старых браузеров упрощенную версию.

2. Воспользоваться свойством background-size, но оно, опять же, работает не везде.

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

4. Использовать костыль с элементом img вместо фоновой картинки.

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

Слева сайта - один цвет. Справа - другой (градиент же). Как в боди сделать плавный переход, если там разные цвета слева и справа получаются, а в боди можно задать только какой-то определенный цвет?

[Alex Shnayder]

Ну, можно прижать градиент к краю окна, а body задать тот цвет, которым он заканчивается. Но вряд ли это вас устроит. Ещё можно придумать что-нибудь с "фоновым" дивом, которому задать один крайний цвет, а боди - другой, но это уже извращение какое-то. Лучше выбрать другой вариант.

Edited October 29, 2012 by Alex Shnayder

[Омск]

Я хочу растянуть фоновое изображение на весь экран, чтобы было как тут, чтобы оно было еще недвижимо. На этом сайте как я понял, это реализовано с помощью CSS3.

Я верстаю сайт программой WYSIWYG Web Builder, она делает это с помощью CSS предыдущей версии.

Вот новый сайт, на нем не получается так растянуть.

Вот код CSS

body{   background-color: #FFFFFF;   background-image: url(images/fon.jpg);   background-position: left top;   background-repeat: repeat;   background-size: cover;   color: #000000;   font-family: Arial;   font-size: 8px;   line-height: 1.1875;   margin: 0;   padding: 0;

По-разному значения я тут ставил, не получается растянуть.

Как тут это сделать?

[mrnobody]

background-position: 50%;