Change background image – to normal html

[Anders]

Can you change the image (the two images side by side) so that they are not called via CSS – but via html, so that lazyload works correctly on the image…

But keep the design?

[David]

Hi there,

is that content being generated by a plugin?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anders]

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anders]

Awesome 🙂

I have set it up… 🙂

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anders]

Thx.

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

Thats the tricky part 🙂

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anders]

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

[Tom]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anders]

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

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

[Tom]

You could try this:

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

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts