Picture element

HTML & CSS
1

Hi, can I ask some help please,

I want to use the picture element because I want to have a fallback image when IOS/safari cannot render the webp extension.

In my production code, I have this


<div class=" my-div-bg-image ">

</div>

CSS

.my-div-bg-image {
   	background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), url('{{ asset("/path/to/mybgimage/$dynamic->image") }}');
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)), url('{{ asset("/path/to/mybgimage/$mydynamic->image") }}');

}

I am confused on how to implement this example to my existing code

<picture>
    <source srcset="/img/mountain.webp" type="image/webp">
    <img src="/img/mountain2.jpg" />
</picture>

Thank you in advance.

2

What does the css have to do with the picture element?

Your picture code looks ok to me.

Or were you thinking to use the picture element instead of the background image?

If so you would need to remove the background image from the css and place it using the picture element instead.

Of course if you want it to act like a background image we would need to see the wider context as it is likely you would want the image to behave like the background image and cover the content area without being in the flow itself. In that case you would need to absolutely place the image underneath the text using a stacking context on the parent. Then you’d need object-fit:cover on the image to cover the area.

There’s just too many variables to give a good answer without seeing what you have and then working out how to manage it :slight_smile:

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.