-
vfstakeyouthAsked on March 6, 2019 at 1:58 PM
I've added an image for the background and played around with the advanced features to have it as a cover, fixed, repeat, etc and can't seem to get the image to fill the entire background (i.e. cuts off and is blank at the bottom) or it runs too long and I lose the bottom of my image. Not sure what setting I need to adjust so that the image fits. If I need to resize my image, I can do that too but not sure what it needs to be before uploading.
-
vfstakeyouthReplied on March 6, 2019 at 2:18 PM
I tried this in CSS based on another forum but it still cuts off the bottom of the trees:
.supernova {
background: url("https://www.jotform.com/uploads/vfstakeyouth/form_files/camp%20background.5c7f2fc8d68df2.31184107.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
-
Welvin Support Team LeadReplied on March 6, 2019 at 2:57 PM
Please try using percentage for the positioning, try below custom CSS codes:
.supernova {
background: url(https://www.jotform.com/uploads/vfstakeyouth/form_files/camp%20background.5c7f2fc8d68df2.31184107.jpg) no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-position: 100% 70%;
}
My screen is 21", 1920 x 1080 resolution, getting this view:
-
vfstakeyouthReplied on March 6, 2019 at 6:01 PM
Thanks. That improved it to match the image that you are sharing but it means that it's only showing 70% of the image and still not the entire image but you get the majority of it so I think it's fine. It would be helpful to know if the images need to be sized to a certain ratio to ensure that the whole image is captured. In this image, it's fine but I can see it being an issue for other images.
-
Jed_CReplied on March 6, 2019 at 9:26 PM
The size of the background image would depend on the device that your users would most likely use. So if your users will use a mobile device, you can tailor the image for mobile devices, but if they use a desktop, you will need to use a larger image with high resolution.
You can check out this article which may give you a better idea of the best size for you: The Best Full Screen Background Image Sizes for Web Design.
Let us know if you have any questions or if you need further assistance.