Hero image Skewes on browser resize

Question

I've placed a 1200px X 900px hero image on my homepage. The problem is it skews when i resize the browser. I've tried playing with px, %, height and width at 100% but nothing seems to work. Any Ideas?

Html:

    <!--Hero-->
<div id="heroimage">
    <div class="row">
        <div class="small-12 small-centered columns">
            <br>
            <div class="heroText">
                <h1>Adolfo Barreto</h1>
                <h4>Web Designer</h4>
            </div>
        </div>
    </div>  
</div>
<!--End Hero-->

css:

    // Hero
 html, body, #heroimage{
   width:100%;
   height:100%;
 }

.heroText {

    text-align: center;
    color: white;
    margin-top: 50%;
    margin-bottom: 50%;
}

#heroimage{   

  background: url('/../assets/img/codeHero.0.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100% 100%;
}
//end hero

My site address is http://adolfobarreto.atwebpages.com Thanks-Adolfo

score 1 · Answer 1 · answered Jan 12 '16 at 07:46

1

Please use below CSS for #heroimage {}

#heroimage {
  background-image: url("/../assets/img/heroVector.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

answered Jan 12 '16 at 07:46

Dhaval Patel

1,076
6
19

score 1 · Accepted Answer · answered Jan 12 '16 at 07:47

1

Your background-size: 100% 100%; rule overrides the background-size: cover; line before it, and forces the background image to bend to the shape of the div. So either just stick to background-size: cover;, or pick one of the other background-size options.

answered Jan 12 '16 at 07:47

ralph.m

13,468
3
23
30

I forgot to push changes to my website. Could you check again please? – Adolfo J Barreto Jan 12 '16 at 07:53

Hero image Skewes on browser resize

2 Answers2