html - Ways to make a background image -

html - Ways to make a background image -

i trying put background image in content div , create image blur failed far. managed background-image show when code image in content div (code below). in other words without making additional div image. in case whole content becomes blur if, example, set filter: blur(...);

the sec method create background-image div. managed either force content right under image or set image somewhere behind content it's not visible.

how propose background-image , prepare issue? codepen - http://codepen.io/anon/pen/hgbja

css

h2 { font-family: open sans; color: #0099f1; padding-left: 20px; text-align: left; } #bizpartners ul { list-style-image: url ("http://www.peopletraining.co.uk/people_training_april_2012002002.jpg"); } .right { position: relative; float: left; margin-top: 50px; width: 100%; min-height: 400px; max-height: auto; z-index: 5; margin-bottom: 5px; background: rgba (255, 255, 255, 0.3); border: 1px solid #000000; background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/nature-wallpapers-2014-2.jpg"); background-size: cover; filter: blur(5px); -webkit-filter: blur(5px); background-repeat: no-repeat; } .right p { margin-left: 30px; margin-top: 20px; text-align: center; }

i made quick, hope it's ok!

fiddle: http://jsfiddle.net/81yawoxg/

html

<div class="container"> <div class="background"></div> <div class="text">content here</div>

css

.container{ position: relative; width: 1280px; height: 700px; } .background{ position: absolute; top: 0; left: 0; width: inherit; height: inherit; z-index: 100; background-image: url("http://www.worldswallpapers.org/wp-content/uploads/2014/02/nature-wallpapers-2014-2.jpg"); filter: blur(5px); -webkit-filter: blur(5px); background-repeat: no-repeat; } .text{ position: absolute; top: 0; left: 0; width: inherit; height: inherit; z-index: 200; padding: 20px; }

html css background-image