Trying to Overlay Logo on Video

Shopify Discussion
1

I’m so close!

I’ve got a Video Background Section in the Dawn theme, and I’d like to overlay my logo onto it. I’ve got the code about right, it seems, but when the image renders over the video, it is super blurry.

I’ve included the code in a snippet below, as well as images of the rendering in question and the same exact image included in another section, just so you can see it’s not the file resolution that’s the problem.

Any ideas?

Code and Images below:

{% if block.type == ‘video’ %}

{%- if block.settings.video_link != blank -%}
<video class="video-js" loop autoplay preload="none" muted playsinline

poster=“https:{{ block.settings.video_image | img_url: ‘master’ }}”

{% endif %} ![The blurry one|2698x1514](upload://kEKWPFc4yPSVH0cjlygnVcOF6B3.jpeg)

The same image included in another section
The same image included in another section2280×1422 124 KB

2

Hi @williamlglass

Please share your website so we can provide a code appropriate for you

3

Nuts. It’s not published yet. That’s why I was hoping the code snippets would help. What can I do short of sharing the website?

4

Haha. On today’s episode of “tell me you’re a noob without telling me you’re a noob,” we’ll play “what is a preview link?” Haha.

Here you go: https://oowd1xvfgo1v1nyk-77384220958.shopifypreview.com

5

Lol @williamlglass

Thank you. Just adjust your image size to atleast 2200px width. It was way to small

6

Help me understand. If you look at the photos, it’s the exact same image in both. Seems like the image is plenty big.

it’s as if the element in the upper section is resizing the image that I put in the content library. What am I missing? Haha.

7

You are right. It is the html code that you added.

You are getting the small size of the image - https://oowd1xvfgo1v1nyk-77384220958.shopifypreview.com/cdn/shop/files/Plate_Graphic_From_Hero_Section_3_small.png?v=1686209850

This is the link for the bigger image https://oowd1xvfgo1v1nyk-77384220958.shopifypreview.com/cdn/shop/files/Plate_Graphic_From_Hero_Section_3.png?v=1686209850&width=2000

Try to change the liquid to the following and then change the width using css

NOTE: Change the section.settings.image to your assigned schema

Or you can just change your img HTML like so


![Plate_Graphic_From_Hero_Section_3.png?v=1686209850&width=2000|2000x1003](upload://zSGFwS1lEySreVgQQRKyjlapTAl.jpeg)
8

Thank you!. As soon as I try it, I’ll accept this as an answer, but I can alas see that it will work. Cheers!

9

Already *