Имам фон, който има горен и долен градиент и искам да се показва на слой контейнер. Проблемът е в долния градиент, тъй като той трябва да се появи в самия край на div на контейнера. Някакви идеи? Ето няколко примерни кода и imgur снимка:

<style> .container{background: #fff url(images/bg.png) repeat-x;} </style> 

Dynamic stuff goes in here that differs on every page

http://imgur.com/XAaIx

Горният код показва само градиента в горната част, но има ли друг начин да се постигне този ефект?

Можете да опитате нещо като:

<style> .container{background: #fff url(images/bg_bottom_gradient.png) repeat-x;} .subcontainer{margin: 0 auto;background-image:url(images/bg_top_gradient.png);background-repeat: repeat-x;} </style> 

Dynamic stuff goes in here that differs on every page

РЕДАКТИРАНО ЗА ДОБАВЯНЕ НА НОВ СТИЛ:

  • Това би работило, ако слоевете са с еднаква ширина, но контейнерът (div, съдържащ bg) се простира на 100%, докато div на съдържанието е с фиксирана ширина (950px).
  • @fewpeople - Добавена алтернатива.

можете да използвате css правила за множество фонове

div.container { background-image: url(images/bg_top.png), url(images/bg_bottom.png); background-repeat: repeat-x; background-position: top left, bottom left; } 

Това би трябвало да работи.

  • Любопитен съм кои браузъри всъщност поддържат това.
  • Това за съжаление не работи твърде добре в IE :(

е работил за вас: Charles Robertson | Искате ли да се свържете с нас?