Navigation
Archive / Pin orientation of background image or video
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • April 29, 2016 at 3:40 pm #906164
    stonerome
    Participant

    Not sure if this is something that can really be done…

    Seems unless one has the perfect size background image or video on a full-width layout, it’s really hard to keep it from cropping or chopping the top off when screen width gets wide.

    See the two screen grabs hear – the narrow version is better, you can see the top of their heads, but as you widen the window and it stretches, the top gets cut.

    Is there anyway for it to crop from the bottom instead? I’ve fiddled with max and min heights and widths, and that can help, but still not exactly what we’re going for. Didn’t know if there was some way to hard fix the orientation anchor via CSS or other method?

    http://circlecommerce.staging.wpengine.com/

    April 30, 2016 at 3:16 pm #907195
    Rad
    Moderator

    Hi there,

    Thanks for writing in.

    Would you mind providing the screenshots again? I checked but I can’t find the issues you’re referring.

    Thanks!

    May 1, 2016 at 10:45 am #907953
    stonerome
    Participant

    If you drag the window wider versus more narrow the top of the video (or any background) image gets cut off. Would rather the bottom gets cropped…

    May 1, 2016 at 10:46 am #907954
    stonerome
    Participant

    Not sure why the .pngs won’t load, trying jpegs…

    May 1, 2016 at 10:47 am #907955
    stonerome
    Participant

    Trying again…

    May 1, 2016 at 1:24 pm #908128
    Rupok
    Member

    Hi there,

    Thanks for updating. It’s not really possible to keep the width and height consistent for all screen size as it will stretch/shrink the image. background-size: cover; will give you the best responsiveness (it’s default in X) but some part might be hidden based on the screen size.

    Cheers!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-906164 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>