Фон - картинка с радиальным градиентом

Анна · July 21, 2011

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

CSS3 вроде поддерживает радиальный градиент, но ИЕ вроде, пока его никак не поддерживает.

Vlad · July 21, 2011

Нарисовать градиент, установить картинку фоном по центру страницы. Градиент будет иметь фиксированные размеры, ничего резать не придётся.

Анна · July 21, 2011

Нарисовать градиент, установить картинку фоном по центру страницы. Градиент будет иметь фиксированные размеры, ничего резать не придётся.

А потом сверху фиксированной картинки с градиентом установить картинку с прозрачным фоном(веточка в данном рисунке)?

Какой сделать оптимальный размер картинки с градиентом?

Vlad · July 21, 2011

Размер уже от вас зависит, на какое разрешение ориентируетесь, какой дизайн в целом.

Анна · July 21, 2011

Что-то я неправильно делаю...

Вот пытаюсь расположить оба рисунка, как фон. Допустим один- gradient.png, другой- listik.png.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   HTML {background-color: green ;
	 background-image: url(gradient.png); 
	 height: 100%;
	 margin: 0;}
   BODY {background: url(listik.png); 
	 margin: 0; 
         height: 100%;}

 </style>
 </head>
 <body>

  <p>
 qwertyuiop
  </p>

 </body>
</html>

В таком виде, фоновая картинка повторяется, почему при попытке написать no-repeat и fixed картинки не отображаются вообще, только фоновый цвет?

Это оказывается в эксплорере не отображается корректно, в хроме нормально. В IE отображает только одну картинку. Как сделать, чтобы IE тоже понял(отобразил обе)?

Еще вопрос, в хроме нормально обе картинки накладываются одна на другую, а остальной фон белый, мне казалось, что он заполнится цветом background-color: green, но нет. Как поменять этот белый фон? Может лучше было бы поместить каждую картинку в отдельный див и потом оба эти дива поместить в один общий?

Edited July 21, 2011 by AnnaP

Vlad · July 22, 2011

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

background: green url(gradient.png) 50% 50% no-repeat;

no-repeat забыли добавить, вот и повторение идёт.

Анна · July 22, 2011

Vlad, спасибо за терпение, все получается)))

Последний вопрос, почему одним background-ом лучше писать,код короче?

Vlad · July 22, 2011

Ага, короче. Да и ошибок меньше делаешь, опять же потому что писать меньше.

Sign In

Фон - картинка с радиальным градиентом

Question

Анна

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Анна

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Анна

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Анна

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information