CSS image positioning inside <div> <p>I have been making a website and I want an opening image to be found on my screen. The problem is that I have the picture I want to use but it is to big for the space I want it to fit in. This could be solved 2 ways: I could scale the image to fit in the Div or I could position the image inside the div to show the essential parts of my picture. Ideally I would like the second option but I am ok with the first. I believe that I have done sufficient research on this question and this question is not like these:<a href="http://stackoverflow.com/questions/2635957/css-positioning-inside-div">First</a>, <a href="http://stackoverflow.com/questions/24180462/css-positioning-inside-a-div">Second</a>. I have also done my own experiments on this problem but using the position property and clear divs these have not worked to my satisfaction.</p> <p>Here is what i believe to be the essential code for this question:</p> <p>HTML:</p> <pre><code>&lt;div class="jumbotron"&gt; &lt;h1&gt; New IQ Test &lt;/h1&gt; &lt;p&gt;Take our quiz&lt;/p&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.jumbotron { /*padding-left: 50px; padding-right: 10px;*/ height: 500px; display:block; background-image: url(http://bit.ly/1IMUMR0); width: 100%; /*padding-top: 100px; position: absolute; bottom: -30px;*/ text-align: center; color:white; } .jumbotron h1 { padding-top: 150px; font-weight: normal; opacity: 100; text-shadow: 0 0 10px black; font-family: Helvetica; } </code></pre> <p>The image I am using is not owned by me. I realize this is illegal. I am NOT going to put this web page out for general use so it us ok if I use this image. All your help is greatly appreciated.</p>