Change background image - to normal html

Hi there,

is that content being generated by a plugin?

No, just html/css..

Now I have changed the left image to "normal" html, and the right is loaded from CSS.

I wan't the left image, to behave like the right one.. ( when scaling up and down - responsive)

But I can't figure out the css

Hi there,

Both seem to be using background images still.

Basically, you want a container with the image and text inside of it:

<div class="image-container">
    <img src="URL TO IMAGE" />
    <span class="image-text">Your text here</span>
</div>

If you can set that structure up, we can help with the necessary CSS.

Let me know :)

Awesome :)

I have set it up... :)

Give this CSS a shot:

.image-container {
    position: relative;
}

.image-container .image-text {
    position: absolute;
    left: 0;
    bottom: 10%;
    background: #222;
    color: #fff;
    padding: 10px;
}

Thx.

The headline works fine, but the image does not resize on mobile / tablet.

Thats the tricky part :-)

The image looks good to me as I size down the page. Is there a specific width I should be looking at?

The right one changes image height on mobile, and also has a minimum height to it when scaling down

That's because the right one is still a background image. Background images behave differently to static images (which the left column is now). Are you wanting the static image to behave like the background image?

Are you wanting the static image to behave like the background image?

Yes, that was the idea - so the lazyload works.

You could try this:

.image-container img {
    object-fit: cover;
    height: 100%;
}

.image-container {
    position: relative;
    height: 180px;
    overflow: hidden;
    min-height: 180px;
}