css - How can i create text-backgrounds like this -

i saw kind of text background styling on this site , i'd know if it's possible css.

you can achieve effect in different ways. using pseudo elements svg. see snippet use :before, css-background , svg. can try out other methods.

i recommend svg method

svg{    position: absolute;    top: 0;    z-index: -1;  }  h2{    color: #333;    font-size: 44px;    padding: 5px 15px;    position: relative;    display: inline-block;  }  h2:before{    content: '';    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: -1;  }  h2.shape-1:before{    background: #e7a9a8;    border-radius: 10px;    -webkit-transform: skewx(-15deg);    transform: skewx(-15deg);    opacity: 0.65;  }  h2.shape-2:before{    background-size: cover!important;    bacground-repeat: no-repeat!important;    background: url('data:image/png;base64,ivborw0kggoaaaansuheugaaaa4aaabkcamaaadplytoaaactvbmveuaaad///////+qqqq/v7/mzmzv1dxbttvfv7/gxsbmzmzr0dhvv9xyxmtbymjmzmzpz8/sw9lvxsbxycnmzmzows7rxdhtymjvysrwzmzoxm7qxtdrynhtysrvzmzwxc7px8/rydhsy8vvxs3pym/ry8vtx83vym7qytdry8vtym3uyc7qxsvsym3tyc7uys/qxsvrx8zrym3syc7txs/ux8vqymzryc3sys7sxs7tx8vuymzryc3rys7sx87tymvtymzqyc3rxs3sx87symvtycztyc3rx83sym/sycztyc3tx83rym7rym7sycztx83tx83rym7ryc7syczsx83tym3tym7ryc7ryczsx83sym3tyc7rx8zsx83sym3syc3tyc7rx8zrymzsym3syc3tx8zrymzrym3tymzryc3sx87tymzryc3rx83sx87symztyc3rx83sym7sym7symztyc3tx83sym7syczsx83tym3rym3rym7syczsx83sym3tym3rym7sx83sym3tym3rx8zsym3sym3sym3tyc7rx8zsym3sym3sym3sx87tymzrym3sym3syc3sx87symztym3rym3syc3sym7symztym3rym3sym3symzsym3tyc3rx83sym3sym7sym3syc3tym3sym3sym7sym3sx83sym3rym3sym7syc3sym3sym3tym3rym7syc3sym3sym3sym3tym7sx83sym3sym3syc3rymzsym3sym3sym3sx83sym3sym3sym3symztym3sym3syc3sym3symzrym3sym3symzsym3sym3sym3sym3sym7sym3syc3tym3sym3sym7sym3sym3sym3sym3sym3sym3sym3sym3sym3syc3sym3sym3sym3sym3sym3sym3sym1hazycaaaa5nrstlmaaqidbaugbwgjcgsmdq4pebesexqvfhcygrobhb0ehyahiiqljykqkywulzezndu2nzg5ojs8pt4/qefcq0rfrkdisuplte1puffsu1rvvldywvpbxf1ex2bhy2rlzmdoawprbg5vchr1d3l6e3x9f4cbgooehyeiiyqlji2oj5crk5svl5izmpucnz6fokgio6slpqeoqaqrrk2vslgys7s1tre4ubq7vl2+v8dbwspexcbhymnkzm3oz9dr0tpv1tjz2tvc3d7g4upk5ebn6onq6+zt7u/w8vp09fb3+pn6+/z9/gglfeeaaaabykthrah/ai3eaaafgeleqvqyge3bjv/mdxwa8m+vooc9nb5qyh6mkidtzb7287q0biclnos8rdlvzjecyyqcssigmzylm0eyvunqli3fmrljdpur1/x5o3bx67wx+v5purtv9xm/grbcccgedcgpubyfiiqrfg+ju5tkwjuqsw21wmo1vwu1x2evr7cqmjxxwxrkn0z7kqsnxdi85zte6rjojltr84xgjkvtlayyivparik2ixvww92gw5d7c6gkn8vzs1xl1wmado2hhp1zq7kkvrnvy2esdf2ml78qmvpuxi1tr92yu3fsjofgpdgmxcwdntcpyfwgj5oas3zl5qzcu4zrn42n2lw9b52le9dqyogfiwnp+/ikyypn2m3kqifqo1/4phljaznzi3+rww6ttg588hqio1vp6fv0zzumjp9yclzpnxjc/jstry7erkfccbo4iatskbm1ukljhkrzlr7gol6h4skvo46w3kpssnhgddjbxkdw6iutkrbkbefxcy9o2jrjqelsxrxe4hayqvrpdib7sj7blhacn0fuafkkoiqdzs84rlcysonsfziovuuohur2ytsrmn9+gmqxxkfhcypkytbuingklfd8ekumagsfing8wzj4hn5i4r4ymxjngqxt5d0mcd8vmxknwgnt5x4rv6vejmt5yqbtvernys0svwmdvvomtd1ejcsvuqbv5mp0qwmsvyubfvkptwunslgqcs0ktjxnrsknflbvyfkhbqlplomda9qxgphwjgwyfbactcbxrpqbrxq93tbeamjsgs3zdm8i2vanxbkelhdkb0icpayvpepergiiaclajix/8d/+gimtvv8+rfk4wgfa7amjehexshmftn4jws/7iblxslzdgdmhwswnaakhgks+n9wtwvqtel48pkd0hwbnqmit03drbmdfn0g4i63odfb8iiq7j7b1abysjby6jwlt+0h4vb0klc/wiehrcwdkr8kjxkhashgjl1ybs/9gjdyqcaowq0i4nafy1iphuhawjefcpzoxgkhhayrcigoww0i4dbpy4pfwytiagiissliudcwfslhucixlkfbpkdaemjfw6tngoymeszdkwkbcwqdrwbborskljccsg4rlle7ama0jn8ybg+wxjfz6eliskxcpxhcyauurcgk+sgqg4dj5yampr8klcgdjqmkltcay0iserxuyyelfwqwhwojxbqmp5gdt8fokhjolbhmakfbngnixqaejb/rg19hsjhz5fsdyj4surskrs0ogewmo1cphw90ud2hr3+rlsfyvfikxtm6q1gileheqpthbbm0qelv7bhkxuj890xvarv/8zotinmp8yfnut2i3l8clzf6sq+ief+ntrf94fj3c3k3db6hb4id113qftx8ihuowmivje+yukg5juv10sbm/mcqdhmyvmn5jfrkjsfvvln2vty0do8gdncvotozkpacrgpc0wsot4pwtstmvaeaqhomnqdydph+7ayk9putnszckzho92b144r40inpj2q6jl+80irgy/hg14kv0tz6mcvchnnn0f+2d5au36qpkb9vh91jbwv50zpeaxjijw/q4qefjgzji6ryevrkhtxmkew3yxzinusm5o/sz1ibhkyenfdxqe7ou3+cwn6bnxaxet/3r/mkluqurow3jpema4sf9ed2e9dxqxthr4xvcgbd0n15yiuwhtlfgj6jxabzrd+io6ysm5vkl8re62woj8a4k/woo0ufpsrqbnslq1sllddfsesoeyt2atmbtlu8tcekeqjfafccrlcpfkqtlapvvgqv1wpu9opsf9p91qvfelu2/nmk0k9xqj1sqwkvyuihgkhtdbcfylvcbqgghhjbu7g9wyzj6c4/kiqaaaabjru5erkjggg==');  }

<!-- using psedo elements -->  <h2 class="shape-1">public art</h2>    <!-- using css background -->  <h2 class="shape-2">lorem ipsum</h2>    <!-- using svg -->  <h2 class="shape-3">lorem ipsum    <svg version="1.1" id="architecture-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 374 80" style="enable-background:new 0 0 374 80;" xml:space="preserve">  <g style="fill: rgb(227, 203, 160);">  	<path class="architecture-bg-fill" d="m23.4,76c-4.3,0-7.8-3.4-7.9-7.7c-0.1-2,0.6-3.8,1.8-5.3l-4.7,0h-0.1c-4.3,0-7.8-3.4-7.9-7.7  		c-0.1-4.2,3.1-7.8,7.3-8.1c-1.4-1.4-2.2-3.3-2.3-5.4c0-0.6,0-1.2,0.2-1.7c6,39.7,3.1,36.5,3,32.6c-0.1-4.3,3.3-8,7.7-8.1l2.9-0.1  		c-0.2-0.7-0.4-1.5-0.4-2.3c0-1.2,0.2-2.3,0.6-3.3h-0.2c-4.4,0-7.9-3.5-7.9-7.9s3.5-7.9,7.9-7.9h348.6c4.3,0,7.8,3.4,7.9,7.7  		c0.1,4.3-3.3,7.9-7.6,8l-2,0.1c1.6,1.6,2.4,3.9,2.1,6.3c-0.3,2.9-2.1,5.2-4.6,6.4l4,0h0.1c4.3,0,7.8,3.4,7.9,7.7  		c0.1,4.3-3.2,7.9-7.5,8.1l-3.4,0.2c1.4,1.4,2.2,3.2,2.3,5.3c0.1,2.4-0.9,4.6-2.6,6.1c4.2,0.2,7.5,3.6,7.6,7.8  		c0,4.4-3.5,7.9-7.9,7.9l23.4,76l23.4,76z" style="fill: rgb(227, 203, 160);"></path>  </g>  </svg>  </h2>