 <p>You can force this by avoiding the background image altogether as you replace it with a regular image in the <code>&lt;img&gt;</code> tag. Layer containers of content (one with the image and another with text) on top of each other with absolute position and z-index. It's a workaround to the background image problems I've experienced similar to yours and the layers provide nice flexibility for managing content.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#z1 { z-index: 1; } #z2 { z-index: 2; padding: 5%; color: white; } #z1, #z2 { position: absolute; left: 0px; top: 0px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt; &lt;div id="z1"&gt; &lt;img width="100%" src="http://www.verolago.com/blog/wp-content/uploads/2013/11/sailboat.jpg" /&gt; &lt;/div&gt; &lt;div id="z2"&gt; &lt;p&gt;I'm on a boat!&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>