Navigation
Archive / Background Image Size in Section
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • February 3, 2017 at 4:03 pm #1357294
    Dx3Creations
    Participant

    I want to have a designer make an image to put in the Section that goes full width. As you can see from this page:

    FAQ

    I’m testing out one I made myself. First I tried it at 1200×200, then I tried it at 800×150. I want it smaller than 150 but I can’t figure out what is the best way to make it display.

    When I first add it into the segment, it only shows a sliver of the image until I add pixels into the padding of the segment. Even when I add in 75 and 75 (for 150) it still cuts off the top of the image a bit.

    What is the best sizing to put in there, or what is the best way to manipulate the image in that section? I want it to be responsive for all devices, I just want a little break in the text there.

    Thanks!

    February 3, 2017 at 11:36 pm #1357653
    Friech
    Moderator

    Hi There,

    Thanks for writing in! The best way would be adding the image as an Image element not as a background-image. And then turn off the Row’s column container and add a width: 100%; property on the image element STYLE field, so the image can go full-width.


    screenshot

    Let us know how it goes, Cheers!

    February 4, 2017 at 9:41 am #1357919
    Dx3Creations
    Participant

    I will try that! Do you know what width I should make the picture to have it look nice in all resolutions?

    February 4, 2017 at 10:11 am #1357925
    Dx3Creations
    Participant

    Or is your image above making it seem like I should hide the image in smaller resolutions?

    February 4, 2017 at 3:42 pm #1358079
    Rad
    Moderator

    Hi there,

    Yes, you can add multiple images and use that visibility options to display and hide image to the specific device. That way, you can decide what image should be visible. Example, you can have a landscape image on the desktop, then portrait image on mobile.

    The best size is 960px, that should be okay on both large and smaller device.

    Thanks!

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