![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: background, Color, custom, responsive, scaling, Section
-
AuthorPosts
-
January 25, 2016 at 9:45 pm #571620
I’m working in a color section, and I applied a custom image background. How do I get the image to scale responsively?
January 26, 2016 at 2:18 am #571782Hey 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,
ElliottJanuary 26, 2016 at 4:32 am #571860Elliott,
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.
January 27, 2016 at 3:01 am #572517So are you guys just not going to help me?
January 28, 2016 at 4:06 am #573454Hi!
Hmm, does it display that way when you view it in another browser?
Cheers!
ElliottJanuary 28, 2016 at 5:49 am #573487Having 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 8 years, 7 months ago by
chriscorona.
January 29, 2016 at 7:18 am #574350It would be wonderful to have some sort of solution here. A CSS tweak or a supported setting. Thanks.
January 29, 2016 at 7:47 am #574354Hey!
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,
IsmaelJanuary 29, 2016 at 11:56 pm #574835You 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.
January 31, 2016 at 7:25 am #575183Hey!
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,
IsmaelFebruary 20, 2016 at 7:34 pm #586514I 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,
February 23, 2016 at 5:55 am #587557Hi!
You can use the full width or full screen sliders which resizes the image differently compare to color sections.
Regards,
IsmaelFebruary 2, 2017 at 12:53 am #741507Have 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.
February 2, 2017 at 12:54 am #741508Have 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.
February 7, 2017 at 10:08 am #743774Hi!
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!
IsmaelNovember 29, 2017 at 5:54 am #882955Hi 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
November 29, 2017 at 8:29 pm #883170Hi HuxburyQuinn,
Please refer to a solution here
Best regards,
VictoriaNovember 30, 2017 at 2:01 am #883269Hi 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 ; )
December 1, 2017 at 2:23 pm #883903 -
This reply was modified 8 years, 7 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.