Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 10, 2019 at 3:07 pm #1077019
    restube

    Hey all,

    I´ve just been trying to figure out a way that allows me to set the background image of a color section with no other content to do the following:

    Display the full image (height and width) all the time while adjusting the image dimensions/px size according to device width. Basically like a normal image responsiveness but full width.

    I see to options here:
    1. either a way to enable full width for an image element
    2. appropriate settings (css) to use in color section

    I actually would prefer option 2 since it gives me more possibilities.

    Cheers
    Restube

    March 10, 2019 at 8:27 pm #1077104
    Mike

    Hey restube,
    For the top color section image to always be full size, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.page-id-70 #av_section_1 {
    background-position: top !important; 
    background-size: cover !important;
    height: 100vh !important; 
}

    I see that you are hiding the color section for mobile devices so there is no reason to add media queries to the css.

    Best regards,
    Mike

    March 14, 2019 at 10:28 am #1078626
    restube

    Hey Mike,

    thanks for all your help!

    Well, that´s not exactly how I meant it. Now the Color section is 100% of browser height.
    What i was looking for is that the image is adjusting to browser width without cutting the image on the edges.

    Let me try to explain:
    A normal Image element is not being cut off on the edges when browser width is reduced. It will adjust automatically the image size (width and height) so the full image is always displayed. Therefore the browser height doesn´t matter.
    The problem with an image element is, that it isn´t displayed full width.

    I hope this clears thing up.

    Cheers
    Restube

    March 15, 2019 at 5:41 am #1078995
    Mike

    Hi,
    Sorry, I think that I was over thinking it because I thought that you wanted the image width to go to the edge of the screen. To show the full image without cropping the edges you can use this css:

    #top.page-id-70 #av_section_1 {
    background-size: contain !important;
}

    Best regards,
    Mike

    March 15, 2019 at 7:32 pm #1079217
    restube

    Perfect, exactly what i wanted.

    Thanks again, Mike.

    March 15, 2019 at 9:17 pm #1079236
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Color Section: Always display full image, adjust dimensions’ is closed to new replies.