banner image & background-image

  • 313
  • 0
  • 2020-11-11

banner image 

絕對定位放大縮小

 

background-image 寫法

 

 

HTML

    <section id="section-top" class="position-relative">
            <img src="images/banner.jpg" class="img-fluid banner" alt="Responsive image">
            <!-- 手機板圖片 -->
            <img src="images/banner-m.jpg" class="img-fluid banner-m" alt="Responsive image">
            
            <div class="container">
                <div class="row banner-logo position-absolute">
                    <div class="col-md-5 d-flex">
                        <a href="https://www.360d.com.tw/"><img src="images/logo.png" alt="360d" class="logo"></a>
                        <a href="#"><img src="images/ashita.png" class="ml-2 ml-md-5 ml-lg-5 logo" alt="明日之團"></a>
                    </div>
                </div>
            </div>
        </section>

 CSS

#section-top .banner {
    width: 100%;
    margin: 0;
    padding: 0 !important;
    /* max-height: 240px; */
    overflow: hidden;
}
/* 手機板圖片 */
#section-top .banner-m {
    display: none;
}

.banner-logo {
    left: 5%;
    top: 5%;
}

@media (min-width: 320px) and (max-width: 480px) {
    #section-top .banner {
        display: none;
    }

    #section-top .banner-m {
        display: unset;
        width: -webkit-fill-available;
    }
}

父元素 加上  position: relative;

子元素 加上  position: absolute;  ,可設定最大高度固定 & 外、內間距為 0  ,定義在父元素的相對位置

overflow:hidden;  //自動隱藏超出的文字或圖片。

width:fill-available 表示撐滿可用空間 (寬),高度也有此特性,但不常用

 

 

background-image 寫法

&&  Logo

HTML

    <section id="section-banner" class="">
        <div class="container">
            <div class="banner-logo">
                <a href="#"><img src="images/logo.png" alt="" class="logo"></a>
            </div>
        </div>
    </section>

 

CSS

background-image

#section-banner {
    background-image: url('../images/ECC-20-11SHRM/bg-1.jpg');
    background-repeat: no-repeat;
    height: 600px;
    width: 100%;
    padding: 10px 0 !important;
}

Logo CSS

#section-banner .banner-logo {
    margin-top: 30px;
}