@Frank2205

Как сделать такой background?

5c03b096ce18d000711570.png
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ответы на вопрос 3
@lagudal
проще всего svg наверное.
Ответ написан
Комментировать
beliyadm
@beliyadm
because open source matters
Как выше писали СВГ или просто фоновая картинка с 3-5 условий для медиа запросов на разные разрешения (на мой взгляд это проще в реализации)
Ответ написан
Комментировать
iLegion
@iLegion
Web Developer
Добавлю к вариантам выше. Еще возможно используется несколько слоев для background'а.
<div class="sample1">
    <div class="sea">
        <div class="mermaid"><div class="fishing"></div></div>                
        <div class="fish"></div>
    </div>
</div>


.sample1 .sea, .sample1 .mermaid, .sample1 .fishing {
    height:300px;
    width:480px;
    position: relative;
}
            
.sample1 .sea {
    background: url(media/sea.png) repeat-x top left;          
}
            
.sample1 .mermaid {
    background: url(media/mermaid.svg) repeat-x bottom left;
}
        
.sample1 .fish {
    background: url(media/fish.svg) no-repeat;
    height:70px;
    width:100px;
    left: 30px;
    top: 90px;
    position: absolute;
}
            
.sample1 .fishing {
    background: url(media/fishing.svg) no-repeat top right 10px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы