-
Posts
-
Hello,
We are having problems getting our background image to span the entire width of the page. When viewing the website on a mac with Chrome, firefox and safari everything looks with the top section but not with the one further down (even though it previously spanned the entire page and no changes had been made since then). Meanwhile on aPC with Windows 7 (in chrome, IE and firefox), none of the span the entire page. The images are set to scale to fit because we need the entire image to show at all times.
Any idea what could be causing the problem?
Thank you,
Hey mmheather,
Thanks for getting in touch with us!
The best option would be to upload larger images to fit all resolution screen sizes. The best image size would be 1440 x 900 and should scale to fit all screens nicely. Currently one of your images has a resolution of 1280 x 430 and so on a screen wider than 1280px, the image will not stretch pass that size.
Let me know if you need further assistance.
Best regards,
JordanHi Jordan,
Thanks for the specifics, I will fix that image. Unfortunately though the top image, for example, is 1500px and it is still not filling the full width of the page on the PC browsers.
Is that a different issue?
Thank you!
Hi,
The image doesn’t span the entire width so that it can keep its aspect ratio. We can stretch it out to 100% but it will be distorted.
.avia-full-contain { background-size: 100% 100% !important; }If you want, you can set the Background Image Position to “Center Center”. It will still not span the entire width on larger screens but it will be center aligned.
Best regards,
IsmaelThank you, I understand now.
Unfortunately though in order to make the whole image appear I have to set a minimum height for the color section. The problem is that in mobile view it created huge whitespace above and below the section. Is there a way to disable the minimum height when it switches?
Thank you!
Hi,
Edit the color section then add a unique Section ID to it. Use “custom-section” for example then add this in the Quick CSS field:
@media only screen and (max-width: 989px) { #custom-section { background-size: cover !important; } }Setting the background size property to cover will force the image to cover the whole container. But in order to keep the background’s aspect ratio, you may see some parts of the images cut off or it may overflow outside the container.
Best regards,
IsmaelHi Ismael,
Unfortunately that doesn’t fix the problem because that still maintains the section height of the desktop version. I like how the image resizes responsively and the size of the image decreasing as the page does is perfect but I just want to know if there is a way to get rid of the white space above and below as the section tries to maintain the original height.
Thanks,
Hey!
Did you try it? The code should force the background to cover the whole container. It will remove the empty space above the section.
Best regards,
IsmaelHi, I did try it but as I said making that change still maintains the section height of the desktop version which becomes way too large on a mobile view and parts of the image get cut off when the page is made smaller.
Without that change the entire background image always shows and when you reduce the size of the page, the image size reduces proportionately (which I like). But when it switches to mobile view I want to eliminate the white space all together. In the desktop view I have the minimum height set to 700px so that enough of the image shows. But when it switches to mobile view 700px is way too large for the screen.
If possible I would like the height of the section to change proportionately, in the same way that the image does (aka gets smaller as the page does) so that the whole image is still displayed on the mobile view but have the empty space that is left to fill the 700px minimum height go away.
Does that make sense?
- You must be logged in to reply to this topic.