Фоновый рисунок CSS с горизонтальным градиентом

Question

У меня есть проблема с использованием изображения с градиентом в качестве фонового изображения для главного меню.

Это изображение для фона:

Как вы знаете, изображение имеет 2 градиент, во-первых, очень далеко слева и во-вторых 3/4 вправо. То, что я хочу достичь, как это:

Кто-нибудь знает лучшие практики, чтобы сделать это? Я знаю, что единственная проблема с этим - это ширина браузера, где мне нужно убедиться, что очень далекие левые начнут с очень светло-серого. Очень далеко, будет темно-серый.

Другая проблема, которая у меня есть центр градиента для главной страницы:

Это немного легче и может быть сделано с помощью CSS градиента. Тем не менее, я пытался установить начало градиента из центра, за желтым div.

Если кто знает, как наилучшим образом достичь этого, это было бы здорово.

Благодарим вас за помощь.

Answer 1

Если вы используете изображение в качестве фонового изображения?

<div style="width: 896px; height: 20px;background-image: url(bg.png);"><div style="padding-left: 250px;">test</div></div> 

Answer 2

Для достижения этой цели исключительно в CSS, вы могли бы сделать два контейнера с градиентом каждого, таким образом они могут изменить ширину и будет по-прежнему выглядят одинаково.

Например

HTML:

<div id="container"> 
    <div id="gradient1"></div> 
    <div id="gradient2"></div> 
</div> 

CSS:

.container { ..... } 
.gradient1 {width:60%; float:left; GRADIENT} 
.gradient2 {width:40%; float:left; GRADIENT}