How to Make Header Image responsive?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Md Harun

    (@haruncpi)

    10 years ago

    Make media query css with image width:100%;

    Thread Starter thaisuresh

    (@thaisuresh)

    10 years ago

    Thanks Mr.Harunur Rashid,

    pls find below code, guide me the changes .!!!!

    .post {
    background: #FFFFFF;
    padding: 10px;
    }

    img {
    max-width: 100%;
    height: auto;
    }

    /* HTML5 5th @media query trigger point */
    .site-header {
    min-height: 80px;
    }

    .header-image .site-header .wrap .title-area {
    width: 400px;
    height: 80px;
    background-size: 400px 80px;
    }

    /* HTML5 6th @media query trigger point */
    .site-header {
    min-height: 60px;
    }

    .header-image .site-header .wrap .title-area {
    width: 300px;
    height: 60px;
    background-size: 300px 60px;
    }

    /* Pre-HTML5 5th @media query trigger point */
    #header {
    min-height: 80px;
    }

    .header-image #header .wrap #title-area {
    width: 400px;
    height: 80px;
    background-size: 400px 80px;
    }

    /* Pre-HTML5 6th @media query trigger point */
    #header {
    min-height: 60px;
    }

    .header-image #header .wrap #title-area {
    width: 300px;
    height: 60px;
    background-size: 300px 60px;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to Make Header Image responsive?’ is closed to new replies.