Kyle F Posted August 20, 2020 Share Posted August 20, 2020 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? Link to comment Share on other sites More sharing options...
Solution bfarber Posted August 21, 2020 Solution Share Posted August 21, 2020 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. Kyle F 1 Link to comment Share on other sites More sharing options...
Kyle F Posted August 22, 2020 Author Share Posted August 22, 2020 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! Link to comment Share on other sites More sharing options...
Recommended Posts