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

Question

[Frank2205]

Comments

[Ярослав Иванов]

Кортинкой

[coderxx]

Ярослав Иванов, с языка снял

Answer 1

[lagudal]

проще всего svg наверное.

Answer 2

[Beliyadm]

Как выше писали СВГ или просто фоновая картинка с 3-5 условий для медиа запросов на разные разрешения (на мой взгляд это проще в реализации)

Answer 3

[Yusif Zourab]

Добавлю к вариантам выше. Еще возможно используется несколько слоев для 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;
}