CODEWITHSUNDEEP
htmlcssresponsive-design
Dominik Skála
Dominik Skála

Reputation: 831

Change size of image only on height but not width

I have problem with my responsive-design. All elements are changing when I resize height and width of browser but background image is changing only when I change height. When I'm changing width then it's same.

Normal: https://i.sstatic.net/JKPRn.jpg

Change width: https://i.sstatic.net/DTeh5.jpg

Thanks for all your help

HTML:    
         <div class="wrap-hero-content">
              <div class="hero-content">
                <span class="typed"></span>
              </div>
          </div>
          <div class="mouse-icon margin-20">
            <div class="scroll"></div>
          </div>

CSS:    #home {
        background: url('../images/testimonial-bg.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-width: 100%;
        min-height: 100%;
        height: 100%;
        width: 100%;
        display: block;

        .wrap-hero-content{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        }

        .hero-content{
        position: absolute;
        text-align: center;
        min-width: 110px;
        left: 50%;
        top: 58%;
        padding: 65px;
        outline-offset: 8px;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        }

Upvotes: 2

Views: 2307

Answers (2)

Ihor Lavs
Ihor Lavs

Reputation: 2463

Try to add the following code: background: url('../images/testimonial-bg.jpg') center no-repeat; I've added background-position property equals to center. Maybe it'll help you

#home {
    background: url('../images/testimonial-bg.jpg') center no-repeat;

    -webkit-background-size: cover;
    background-size: cover;

    height: 100%;
    width: 100%;
    display: block
}

Upvotes: 2

Arindam Sarkar
Arindam Sarkar

Reputation: 224

use this css

#home {
        background: url('../images/testimonial-bg.jpg');
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
        min-width: 100%;
        min-height: 100%;
        height: 100%;
        width: 100%;
        display: block;
}

Upvotes: 1

Related Questions