gistfile1.html

<style>
    .full-width { position: relative; width: 100%; height: 300px; }
    .full-width:before { content: " "; display: block; position: absolute; width: 300%; height: 100%; left:-100%; background: inherit; z-index:-1; }
    .full-width:after { content: " "; display: block; position: absolute; top:0; width: 100%; height: 100%; left:0; right: 0; margin: auto; z-index:-1;}
</style>

<div style="width:300px;min-height:600px;margin:0 auto">
    <div class="full-width" style="background: #c0c0c0 url('http://lorempixel.com/1800/600/nature/1800x600/') no-repeat center top;">
        <img alt="" src="http://placehold.it/300x300" style="opacity:0.8;"/>
    </div>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisl neque, ultrices id metus ut, ullamcorper sagittis nunc. Aenean nec commodo nulla, et tincidunt neque. Vestibulum suscipit bibendum odio et tincidunt. Fusce non magna ullamcorper, vulputate sapien at, aliquet dolor. Nulla facilisi. Curabitur ornare venenatis tortor, a ornare nisl dignissim in. In pellentesque pretium sollicitudin. Nulla sed dictum leo, eu vulputate erat. Nulla sit amet magna ultricies dolor suscipit imperdiet. Ut hendrerit faucibus malesuada. Suspendisse euismod sem nec sapien mollis blandit.
    </p>
    
</div>

preview: http://jsfiddle.net/wryxzpdc/