-
Posts
-
I’m working in a color section, and I applied a custom image background. How do I get the image to scale responsively?
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,
ElliottElliott,
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.
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.
It would be wonderful to have some sort of solution here. A CSS tweak or a supported setting. Thanks.
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,
IsmaelYou 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.
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,
IsmaelI 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,
Hi!
You can use the full width or full screen sliders which resizes the image differently compare to color sections.
Regards,
IsmaelHave 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.
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.
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!
IsmaelHi Ismael,
NOV 2017
Colour Background Video Not Responsive
Wordpress 4.0
ENFOLD 4.2 with Child ThemeDeactivated ENFOLD CHILD
Enabled ENFOLD CHILD
Deactivated ENFOLD CHILD
Activated ENFOLD PARENTIn 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
Hi HuxburyQuinn,
Please refer to a solution here
Best regards,
VictoriaHi 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 ; )
- You must be logged in to reply to this topic.