-
Posts
-
Hi guys
I have a nice image for being set as a background to a colour section, it is 1920 wide and 1010 height. The problem is if I select it to stretch (cover) it gets cropped and if I select scale (contain) it doesn’t fill browser width.
A detailed explanation of my problem is at http://changosmicro.flywheelsites.com/my-problem/
What I want to achieve is detailed in this post. I want the image to be the full browser width and then have the height tall enough to display the full image and maintain aspect ratio.
Any tips on some css tweak to achieve this? Do I need to use the padding percentage property to achieve this?
Hey codecreative,
Have you tried setting the Color Section’s minimum height? :) You can select “Custom height in pixel”, and then set the height you want.
Best regards,
SarahHi Sarah
This wouldn’t work. Because the issue is that on a screen of 1920 width we want the height to 1010
But if the screen is 1600 wide we want the height to be 789.
So if we were to say the minimum height is to be 1010 as your screen width reduces the background image will loose its aspect ratio. You would be seeing something that is 1500 wide and 1010 tall. If you specify minimum height to be 789 then on a 1920 width screen the height won’t be tall enough as the color element will be only 789.
What we need is the height to be a percentage of the width. And for it to maintain that so if a screen width reduces so does the height. The height must be 52.6% pixels in height of the colour sections width.
That is the only way I think to do it. How can we specify the min height to be a percent of the colour sections width?
okay guys i 90% figured this one out, take a look at my myproblem page now
Using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 as my inspiration what I did was set the background image to contain.
I then set padding-top to be 52%. I did this because 1010 x 100 divded 1920 gives us 52%. So we know the height is to be 52% of the width.
I’ve almost got it all figured out but then realised dropping an element say text in the colur selection now pushes it down due to padding. So if you look at the w3schools example it applies some css to the text element telling it to move back up. Using position absolute and top 0.
How ever when I attempt to apply that to my text box in enfold it fails to have an impact. Any final pointers on how to achieve this so elements position properly within the color selection?
Hi,
I’m sorry but you can’t have the background image fully visible in the container while maintaining its aspect ratio, at least not on every screen sizes. You have to compromise one aspect of the background image. One workaround is to create multiple versions of the image for specific screen sizes and then apply it using css media queries.
Best regards,
IsmaelHi Ismael
Okay sorry I don’t mean to dispute this but I have solved the issue of the background you can see at
If you view this page on any screen, on any desktop device 13inch to 21inch the background adjusts and looks great and maintains aspect ratio.
All I need some advice on is how to position an enfold avia text box.
I tried some absolute positioning on it but it seems some elements of enfold layout builder don’t move. What css can be used for this theme element to be moved upwards?
You can see the text is “Click here to add your own text” at the bottom of the page and it belongs in the div above
Hi,
That’s actually a nice solution. I’m not sure how it’s going to work if there are more contents in the section. And there’s a large gap or white space below the background image. Maybe, this will help.
.mycustompadding .content { padding: 0; }And try this css code to move the text block upwards.
.mycustompadding .av_textblock_section { margin-top: -49%; position: relative; }Best regards,
Ismael
- The topic ‘Colour section background image being cropped’ is closed to new replies.