Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted August 20, 20204 yr Hey people. I have a quick question regarding Subscription package images on the non-fluid wide option of a theme from IPS Focus (not specifically asking for support for that theme). So In the Subscriptions bit, the image of the packages stretch out and aren't properly aligned. For example: If I go to Firefox's Inspect Element and under ".cSubscriptionsHeader" untick the "background-size: cover;" element, it shows as follows: Now the issue is the blue-ish background. If I enable the third subscription plan it aligns perfectly as so: How can we make it so it shows like the last one (the 3 plans) with only two?
August 21, 20204 yr Solution You can't with the image dimensions and styling that you are using. By default we use background-size: cover which means that the image will fill the available area and be clipped, and that's what you are seeing. If you don't (or use other another background-size value such as "contain"), then the image will be displayed within the area and not be clipped, so you see a letterbox effect (bars on the sides, or with different dimensions potentially on the top/bottom). You can change the background color, but you can't change the effect. Long story short, if you want to use two subscriptions and have the "cover" effect, you should adjust your images to better match the display dimensions.
August 22, 20204 yr Author 11 hours ago, bfarber said: You can't with the image dimensions and styling that you are using. By default we use background-size: cover which means that the image will fill the available area and be clipped, and that's what you are seeing. If you don't (or use other another background-size value such as "contain"), then the image will be displayed within the area and not be clipped, so you see a letterbox effect (bars on the sides, or with different dimensions potentially on the top/bottom). You can change the background color, but you can't change the effect. Long story short, if you want to use two subscriptions and have the "cover" effect, you should adjust your images to better match the display dimensions. Ah I understand. So if I open the PSDs in photoshop and resize them to properly fit the dimensions it'll be fine? Thanks, Brandon. I greatly appreciate your help!
