CODEWITHSUNDEEP
htmlcss
Jebediah15
Jebediah15

Reputation: 794

Image goes outside div when browser is resized

I put together something that I thought was pretty straight forward. However, one of the images is causing me trouble when I re-size the browser. I read this, this, and this to try to figure out why the image is jumping out of the div. I add the overflow: hidden; and then I tried to readjust min-width to 500, where it was previously 767.

css

.contact-section {
  width: 100%;
  height: auto;
  padding: 50px 0;
  color: white;
  background: url(../images/Death_to_stock_Marzocco_Coffee_10.jpg) no-repeat center center;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  overflow: hidden;
}
@media (min-width: 500px) {
  .content-section {
    padding-top: 250px;
  }

html

<!-- Contact Section -->
<section id="contact" class="contact-section text-center">
    <div class="contact-section">
      <div class="container">
              <div class="col-lg-8 col-lg-offset-2">
                    <!--<p>contact us</p> -->
                  <ul class="list-inline banner-social-buttons">
                      <li>
                        <a href="mailto:[email protected]" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Email</span></a>
                      </li>
                      <li>
                          <a href="https://twitter.com/user" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
    </div>
</section>

I am getting two problems: 1) The image spills when I resize (image 1) 2) The div image appears to be distorted (image 2)

Thanks for any help.

EDIT Problem 1 was due to mistakenly including an older css file in the directory that was overwriting the body Problem 2 was solved by adding no-repeat as mentioned by several commentors

image 1 image 2

Upvotes: 0

Views: 550

Answers (2)

flamelite
flamelite

Reputation: 2854

add no-repeat

background: url(../images/Death_to_stock_Marzocco_Coffee_10.jpg) no-repeat center center;

also add background-size:contain; to .contact-section property to scale the background image.

Upvotes: 1

Rudi Urbanek
Rudi Urbanek

Reputation: 1943

you applying your image (contact-section)class to two tags maybe that has some kind of bad effect

<section id="contact" class="contact-section text-center">
    <div class="contact-section">

Upvotes: 1

Related Questions