<style>
.backurl{ background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(https://res.cloudinary.com/glueckkanja/image/upload/c_limit,f_auto,q_auto,dpr_auto/blog/heads/{{ page.blogtitlepic }}.jpg);} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .backurl{background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(https://res.cloudinary.com/glueckkanja/image/upload/c_limit,f_auto,q_auto,dpr_auto/blog/heads/{{ page.blogtitlepic }}.jpg);}} </style> <section class="blogtitlepic container-fluid backurl"> <h1>{{page.title}}</h1> </section>