-
Posts
-
Hi there,
I’m struggling a little bit with a Grid row. I have placed an image as one of the column backgrounds. The problem is I can’t get the image to fit properly, it’s either to big or too small.
Playing around with the different image options under the Background Repeat section, I’m getting the following results:
1) No Repeat: https://drive.google.com/open?id=1Vd-G7x5yOs2Yofp3CSTCJ7t4l-S8iytu
The image inserted in here is only 600 pixels wide, so I see how this is supposed to function in theory. I increased the size of the image and did another test, but on wide screens (even with a 900 pixel wide image), there’s still a bit of extra space between the 2 columns.The idea is to get the whole width of the image to fit in the column, edge to edge.
2) Scale to Fit: https://drive.google.com/open?id=1Jx6WnrS632P22TMKyniMf31qe0Hz7wPe
Looks like it’s trying to fit the whole page, behind both cells?3) Stretch to Fit: https://drive.google.com/open?id=1HbhineemotyOijR3p7OSvOLJ9Zg0LuJq
I thought this one was the one that would get what I wanted, but it’s not fitting in the cell I put it in.Here’s a screenshot of the setup I have on the editor: https://drive.google.com/open?id=1MkZ8X1APiomRw0eTuokPEoNpmzRScrbe
Credentials below in the private content so you can log in as needed.
Thanks in advance!
Hey kellyCraftMedia,
Sorry for the late reply and thanks for the login details, could you upgrade the account to admin rights please? Otherwise we can’t access the editor.
Setting background images to show everything in the image is very difficult unfortunately, some loss of image data is inevitable since the image has to cover the whole container. Also, on which page are you trying this out?
Best regards,
RikardUser level updated! The page is the home page. I’m not concerned about loss of image quality – that’s not really part of my problem. I just want the image to fit in the container I’ve set for it.
Thanks!
Hi kellyCraftMedia,
Even when I’m logged in, the page is still asking for the password. Can you please post it to?
Best regards,
VictoriaHi,
I’m not concerned about loss of image quality – that’s not really part of my problem.
Your best option in this case is “Stretch to Fit”. By “image data”, we are not referring to the quality, parts of the actual image has to overflow outside the cell container in order to keep its aspect ratio. We can set the image to fit the cell container but it may get distorted.
Best regards,
IsmaelAs I indicated previously, Stretch to Fit still doesn’t work https://drive.google.com/open?id=1HbhineemotyOijR3p7OSvOLJ9Zg0LuJq
The image is stretching to the entire website container, not the image area or grid width that I’ve set.I am running out of time on this and need a solution…. please help!
Hi,
The image is stretching to the entire website container, not the image area or grid width that I’ve set.
It’s only stretching within the cell container. Again, parts of the image have to overflow outside the background positioning area in order to keep its aspect ratio. Please try to use a smaller image and adjust it until you get the best result.
The cell looks good on a 1920x1080px resolution screen. https://imgur.com/a/5vSha
Best regards,
IsmaelHi Ismael,
I did make the image smaller and it still resized beyond the cell container no matter what I did. If you review the screenshots I sent over in the first post, you can see where this is not working.
I’m convinced something isn’t working correctly which is why I haven’t given up on this yet! For instance, in that last sample I posted you argue that “It’s only stretching within the cell container” – but it’s actually stretching within the entire row.
I did now notice that the moment I switch it to the Fixed option, that’s when it stretches across the entire row (as opposed to the cell). When Scroll is selected, it fits just fine.
Hi,
I did make the image smaller and it still resized beyond the cell container no matter what I did.
That’s the expected behavior. The browser will enlarge the image automatically when you set the background attachment to “Fixed”. Unfortunately, that’s something we can’t control.
Best regards,
IsmaelI agree with the issue in this thread and that it hasn’t been resolved. I read through and am having the same issue. When trying to mimic the effect on the home page of your demo Freelancer, for example, an image that is roughly the aspect ratio placed within a 1/2 grid still stretches horizontally across the entire grid (both halves) rather than just the single 1/2 container using “Stretch to fit.” Using “Scale to fit” works, but then you run out of image horizontally if the person opens up the browser too wide. I, too am convinced this is an Enfold bug and not a normal result.
Hi,
tell me why the images are acting like they are going across both halves of the grid cells and not just fitting within the one.
Please take note that if the Background Attachment is configured as Fixed, the images will inherit the document’s width based on the current screen resolution, rather than directly from their parent container – which, in this case, is the grid row cell. This is the reason why the background images are a lot larger than the cell container.
The only way to influence the size of the background images in this scenario, is to adjust the value of the background-size property.
.flex_cell.av-llci4a9h-d437d0207b8362e3dea85fe4c9565383, .flex_cell.av-1u7y-c83ae2a247f258bd7561f4b963599c56, .flex_cell.av-205mi-343de35deddea834bda60797b215b46e { background-size: contain !important; }Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings to make sure that the changes take effect.
Best regards,
IsmaelThank you! I do wish that if a background image is placed within the cell, it would be for that cell only and not the entire row.
Hi,
As mentioned earlier, you can use the css code above to adjust the size of the background image. Replacing the default property value “cover” with “contain” should decrease the size of the image. You can check for other property values in the following link.
// https://www.w3schools.com/cssref/css3_pr_background-size.php
Best regards,
Ismael
- You must be logged in to reply to this topic.