Фоновый рисунок Заполнить div с градиентом

Question

Ниже приведена моя скрипка, в которой я пытаюсь поместить фоновое изображение (положение по центру) в div, ширина которого установлена ​​на 100%, и я хочу, если ширина фонового изображения 20 пикселей и пользовательский экран равен 100px, тогда изображение не растягивает ширину и размытость градиентной части заполняет область в левой и правой части изображения. любезно дайте мне знать, как я могу это сделать?

http://jsfiddle.net/R6K5S/

#background { 
    /* fallback */ 
    background-color: #2F2727; 
    background-image: url(http://farm5.staticflickr.com/4004/4335972718_a491a3076d.jpgimages/radial_bg.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    width:100%; 
     height:250px; 

    /* Safari 4-5, Chrome 1-9 */ 
    /* Can't specify a percentage size? Laaaaaame. */ 
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); 

    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); 

    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727); 

    /* IE 10 */ 
    background: -ms-radial-gradient(circle, #1a82f7, #2F2727); 

    /* Opera couldn't do radial gradients, then at some point they started supporting the -webkit- syntax, how it kinda does but it's kinda broken (doesn't do sizing) */ 
} 

Answer 1

Насколько я понимаю, это, скопируйте и запустите код. и дайте мне знать. моя скрипка акк не работает

<div id="background"> 
    <img class="imageclass" src="http://www.topcoder.com/wp-content/themes/tc-eoi-theme-v3.2/i/rss-small.png"/> 
</div> 

//CSS 
.imageclass{ 
    position:absolute; 
    top:50%; 
    left:50%; 
} 

#background { 
    background-color: #2F2727; 
    background-image:  url(http://farm5.staticflickr.com/4004/4335972718_a491a3076d.jpgimages/radial_bg.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    width:100%; 
    height:250px; 
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); 
    background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); 
    background: -moz-radial-gradient(circle, #1a82f7, #2F2727); 
    background: -ms-radial-gradient(circle, #1a82f7, #2F2727); 
    box-shadow: inset 0 10px 10px 10px rgba(255,255,255,1); // Here you asked for blurry Edge 
} 

и это то, что вы просили, добавьте это как в классе #background

box-shadow: inset 0 10px 10px 10px rgba(255,255,255,1); 

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