Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 15, 2015 at 11:52 pm #459750
    hotspot

    Hi,

    We have a section where a background image is placed.
    We have set the image to stretch to full width.
    But we also need the section to be as heigh as the image (so the image is not cut off).

    With the settings we cannot achieve this, please advise how to achieve this.

    Love to hear from you!

    June 16, 2015 at 8:00 am #459878
    Basilis

    Hey hotspot!

    Can you show us an example, so we can target the area?
    Your code needs to be something like

    div{
    background-image: url('5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * width) */
                /* (853 / 1280 * 100) */
}

    Best regards,
    Basilis

    June 16, 2015 at 8:17 am #459880
    hotspot
    This reply has been marked as private.
    June 18, 2015 at 4:51 am #461058
    Josue

    Hi!

    I see you’re using image elements + text blocks absolute positioned now, i guess that solves your initial issue?

    Cheers!
    Josue

    June 18, 2015 at 8:34 am #461156
    hotspot

    Hi Josue,

    Because we could not find a solution (and could not wait for an answer anymore) we had to rebuild the section.
    But we would still like to solve it in the intial way.
    Do you know a solution for this issue?

    Love to hear from you.

    June 18, 2015 at 9:49 am #461190
    Josue

    It would be possible with some JavaScript to detect the height of the image and based on that adjust the section height when the window resizes, unfortunately that involves custom coding which is beyond our support scope. You can request a customisation quote from a third-party provider here.

    Regards,
    Josue

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.