Как сделать так, чтобы картинки были адаптированы к фону? - PullRequest
0 голосов
/ 12 февраля 2020

Как я могу сделать фоновое изображение, где карта реагирует на контакты профиля?

Рабочая демонстрация на этом сайте: http://t.commonsupport.com/appee/

На сайте, если вы измените размер затем вы можете видеть фон (карта).

фоновое изображение (карта) отзывчиво, а контакты - нет.

    .banner-author-box{
    position:relative;
    z-index:1;
}

.banner-author-box .author-inner{
    position:relative;
    text-align:center;
}

.banner-author-box .author-inner .image-outer{
    position:relative;
    background:url(../images/icons/author-bg.png) center top no-repeat;
}

.banner-author-box .author-inner .image-outer .image{
    position:relative;
    width:50px;
    height:50px;
    margin-left: 6px;
    top: 6px;
    margin:0 auto;
    border-radius:50%;
    overflow:hidden;
}

.banner-author-box .author-inner h3{
    position:relative;
    color:#ffffff;
    font-size:40px;
    margin-top:20px;
    font-family: 'Qwigley', cursive;
}

.banner-section-eight .banner-sidebar .banner-sidebar-inner .authors-box .author-one{
    position:absolute;
    left:-14%;
    bottom:39%;
}

.banner-section-eight .banner-sidebar .banner-sidebar-inner .authors-box .author-two{
    position:absolute;
    right: 18%;
    bottom: 34%;
}

.banner-section-eight .banner-sidebar .banner-sidebar-inner .authors-box .author-three{
    position:absolute;
    left: 34%;
    top: 29%;
}

    .author-box{
        position:relative;
        padding: 35px 40px 45px;
        background-color: #f4f7ff;
        margin-bottom: 115px;
    }

    .author-box .inner-box{
        position:relative;
        padding-left: 130px;
        min-height: 100px;
    }

    .author-box .thumb{
        position:absolute;
        left:0px;
        top:0px;
        height: 100px;
        width: 100px;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 15px;
    }

    .author-box .thumb img{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
    }

    .author-box .info{
        position: relative;
        padding-top: 10px;
        margin-bottom: 15px;
    }

    .author-box .info span{
        position: relative;
        display: block;
        font-size: 16px;
        line-height: 26px;
        color: #999ab9;
        font-weight: 500;
    }

    .author-box .info h5{
        position: relative;
        display: block;
        font-size: 18px;
        line-height: 24px;
        color: #454789;
        font-weight: 500;
    }

    .author-box .text{
        position: relative;
        display: block;
        font-size: 18px;
        line-height: 30px;
        color: #8182a8;
        font-weight: 500;
    }

Отредактировано и добавлено Author (контакты профиля).

Не могу найти способ заставить их реагировать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...