Как сделать такой фон с помощью css?

Question

[ayapergenov]

Возможно ли с помощью css сделать такой фон?

Answer 1

[Moskus]

Например, так:

background: #2e5a89; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #2e5a89 0%, #16283e 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#2e5a89), color-stop(100%,#16283e)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #2e5a89 0%,#16283e 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #2e5a89 0%,#16283e 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #2e5a89 0%,#16283e 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #2e5a89 0%,#16283e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e5a89', endColorstr='#16283e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Comments

[ayapergenov]

Не так получилось, увы. Изменение идет к центру а не в верхний левый угол как на примере

[Moskus]

ayapergenov: Вы не писали о том, что положение центра градиента является принципиальным.
Ну и, как вы могли догадаться, но не догадались, изменив ключевое слово center на нечто иное, можно менять и положение.
Если у вас свежий browser, попробуйте заменить это

radial-gradient(ellipse at center,  #2e5a89 0%,#16283e 100%);

на это

radial-gradient(ellipse at 15% 15%,  #2e5a89 0%,#16283e 100%);

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

[Moskus]

Для разных свойств синтаксис может незначительно отличаться, для стандартного синтаксис описан здесь.

[ayapergenov]

Moskus: Да спасибо. Про радиальный градиент я не знал как подвинуть его с центра.

[Moskus]

ayapergenov: Ну так раз ответ помог - пометьте его, как ответ.

Answer 2

[Max Payne]

Это будет самое креативное решение :D

html {
        background: url(https://hsto.org/files/32f/eea/47c/32feea47cf134e02be7c55bcc9240b46.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

Comments

[targrik]

Овации, овации!

Answer 3

[Александр Логинов-Солоницын]

htmlbook.ru/css3-na-primerakh/radialnyi-gradient , а если нужно чтоб масштабировалось при ресайзе родителя, то только картинкой наверное... ну и для ie тоже картинкой придется вставлять... Я лично ставлю картинкой. Сейчас видимо мода в вебе на радиальный градиент.