Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #571620

    I’m working in a color section, and I applied a custom image background. How do I get the image to scale responsively?

    #571782

    Hey chriscorona!

    It looks fine on my end. Did you get it sorted?

    Or are you wanting the image to use 100% of the width / height of the color section? If so then you will need to remove the parallax effect. Is that ok?

    Regards,
    Elliott

    #571860

    Elliott,

    I didn’t. I’m assuming you’re working on a larger screen than me, so things probably do look fine for you. I’m working on a mid 2012 15in MacBook Pro. I’m attaching some links to screenshots:

    Screenshot 1: http://www.chriscoronadesign.com/wp-content/uploads/2016/01/Screen-Shot-2016-01-25-at-8.23.07-PM.png

    Screenshot 2: http://www.chriscoronadesign.com/wp-content/uploads/2016/01/Screen-Shot-2016-01-25-at-8.23.24-PM.png

    You see how the Slider section at the top displays my entire image, and the contact section is zoomed in? The contact section background photo isn’t adjusting for the width of the browser.

    #572517

    So are you guys just not going to help me?

    #573454

    Hi!

    Hmm, does it display that way when you view it in another browser?

    Cheers!
    Elliott

    #573487

    Having the same issue in Safari. Full Screen Slider is responsive (adjusting width and height of image to fit the browser window’s aspect ratio) and the Color Section background image is not. When I resize the browser, it’s only centering the background relative to the center of the browser.

    • This reply was modified 4 years, 5 months ago by  chriscorona.
    #574350

    It would be wonderful to have some sort of solution here. A CSS tweak or a supported setting. Thanks.

    #574354

    Hey!

    That is actually the default behaviour of the parallax section. In order to create a parallax effect, the color section creates another section inside which is much taller than itself. It will then apply the background to this container which moves relative to the scroll position creating a parallax effect. You can find the background image zooming in on smaller screens because the background-size property is set to cover which may cut off parts of the image in order to keep the background’s aspect ratio. The background-size settings is the same with the full screen slider but since the parallax effect is more subtle on the sliders, the height of the background container is almost the same as the parent container. We can set the background-size property to contain but it will distort the images.

    Regards,
    Ismael

    #574835

    You kind of lost me. All I know is that I had turned the parallax effect off and was getting the same behavior…

    I suppose I’m just going to have to alter my websites design to account for this. Kind of unfortunate. Oh well.

    #575183

    Hey!

    I’m sorry if it’s a bit confusing but you can try this in the Quick CSS field if you want to see the difference between the background size “cover” and contain or 100%:

    .avia-section, .avia-section .av-parallax-inner {
        background-size: 100% 100% !important;
    }
    

    or:

    .avia-section, .avia-section .av-parallax-inner {
        background-size: contain !important;
    }

    The background-size “cover” value will keep the image’s aspect ratio but it may cut off parts of the image. The “contain” or “100%” value will keep the whole image visible in the container but it may distort the images.

    Regards,
    Ismael

    #586514

    I am having the same issue as discussed in this thread.

    The suggested Quick CSS mods both produce undesirable effects on desktop. Is there another workaround? Is a ‘Color’ container the only option for the first item on a page?

    Thanks,

    #587557

    Hi!

    You can use the full width or full screen sliders which resizes the image differently compare to color sections.

    Regards,
    Ismael

    #741507

    Have had the same problem with sizing the background image for Color Sections. Spent countless hours trying to figure it out since starting with the theme two years ago. It’s never an easy process, always confused, what combo of options to use, which size to select, etc. Seems there are a lot of users having the same trouble over the course of this forum.

    Can you Kriesi and team create a comprehensive walk through. The current tutorial doesn’t address the requirements/recommendations for the size of image you’re uploading. And, that seems a vital part….among other steps in the workflow. I’ve literally spent hours trying to make it work to no avail.

    Thanks.

    #741508

    Have had the same problem with sizing the background image for Color Sections. Spent countless hours trying to figure it out since starting with the theme two years ago. It’s never an easy process, always confused, what combo of options to use, which size to select, etc. Seems there are a lot of users having the same trouble over the course of this forum.

    Can Kriesi and team create a comprehensive walk through please. Somewhere. Anywhere. The current tutorial doesn’t address the requirements/recommendations for the size of image you’re uploading. And, that seems a vital part….among other steps in the workflow. I’ve literally spent hours trying to make it work, reading posts here, and hacking away to no avail.

    Thanks.

    #743774

    Hi!

    Could you please provide a link to the page with the issue? If possible, please create a new thread with the site url plus the screenshot of the expected layout. The recommended image size may vary based on the color section’s settings but the size of the image should not be smaller than the standard screen resolutions used nowadays (http://www.w3schools.com/browsers/browsers_display.asp).

    Cheers!
    Ismael

    #882955

    Hi Ismael,

    NOV 2017
    Colour Background Video Not Responsive
    Wordpress 4.0
    ENFOLD 4.2 with Child Theme

    Deactivated ENFOLD CHILD
    Enabled ENFOLD CHILD
    Deactivated ENFOLD CHILD
    Activated ENFOLD PARENT

    In all instances, COLOUR SECTION > BACKGROUND VIDEO is displayed on the left with an element style 480px by 270px
    <div id="mep_0" class="mejs-container mejs-container-keyboard-inactive avia_video mejs-video" tabindex="0" role="application" aria-label="Video Player" style="width: 480px;height: 270px;min-width: 0px;"><div class="mejs-inner">

    the background video is no responsive

    #883170

    Hi HuxburyQuinn,

    Please refer to a solution here

    Best regards,
    Victoria

    #883269

    Hi Victoria,

    My Problem has nothing to do with language.

    Anyhow, I have replaced those 2 files – with no effect.

    my problem is with COLOUR SECTION > BACKGROUND VIDEO is not responsive

    SOLVED!

    added the following to QUICK CSS

    .avia-section .mejs-container {
    height:100% !important;
    width:100% !important;
    }

    But I shouldn’t have to do this.

    Please fix the bug with the next release – thanks ; )

    #883903

    Hi,

    Great, glad you got it working and thanks for sharing your solution.

    Best regards,
    Rikard

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.