Фоновое изображение и фон в 1 теге

Question

Возможно ли одновременно применять цвет фона и градиента фона в теге 1 div? (CSS3 и выше в порядке)

У меня есть код ниже, цвет градиента фона действительно появляется, но фоновое изображение нет.
Чего мне не хватает?

background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#2e2e2e));
background-image:url('/uploads/image1.jpg') no-repeat;
-webkit-background-size: 33px 33px;
border-bottom:1px solid #636363;
height:39px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius: 10px;

Спасибо
Тройник

Answer 1

Хорошо работает, проверь

.example {
    background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, transparent linear-gradient(45deg, #000, #f00) repeat scroll 0 0;
border-bottom: 1px solid #636363;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
height: 200px;
width: 200px;
}

<div class="example"></div>

Answer 2

Да, вы можете использовать фоновые изображения с градиентами, например:

.example {
    height: 200px;
    width: 200px;
    background: url("http://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, linear-gradient(45deg, #000, #F00) repeat scroll 0% 0% transparent;
}

<div class="example"></div>

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

Answer 3

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

Answer 4

Используя псевдоселекторы: after &: before, вы можете иметь до 3 различных фонов, слоистых: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/. Надеюсь, это поможет!

Answer 5

Свойство градиента является частью модуля background, поэтому вам нужно указать background-image, а не просто background.

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

Для простого примера взгляните на www.Dartrite.co.uk.