7 replies · opened Mar 8, 2023
Is there a way to change background images at different screen sizes?
I would love to control the image sizes of my background images to serve up images that scale better for the different viewing points. Can you tell me how to go about doing that?
Hello,
Currently, the Background Image is resized according to the size of the available area for the best fit. You may consider using a different image for responsive devices based on your Image requirements as it may work best in this case. Example:
[ch_pre type="css"].device-xxl .background-image-class { background-image: url('image.jpg') !important; }
.device-xl .background-image-class { background-image: url('image.jpg') !important; }
.device-lg .background-image-class { background-image: url('image.jpg') !important; }
.device-md .background-image-class { background-image: url('image.jpg') !important; }
.device-sm .background-image-class { background-image: url('image.jpg') !important; }
.device-xs .background-image-class { background-image: url('image.jpg') !important; }[/ch_pre]
Additionally, you can also consider using a different background-position CSS Property like center center for different devices as mentioned above.
This will definitely work fine. The Responsive Classes are as follows:
.device-xxl – Class for Larger Devices >=1400px
.device-xl – Class for Large Devices >=1200px to 1399px
.device-lg – Class for Medium Devices >=992px to 1199px
.device-md – Class for Tablets
.device-sm – Class for Landscape Mobiles or Phablets.
.device-xs – Class for Portrait Mobiles
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you for the help. Can you please share a link to help me understand my options for the background-position CSS Properties?
I am new to bootstrap 5, and there look to be some great features but can get a little lost now and then. Can you help point me in the right direction so I can learn more about padding/margin settings and controlling the justification of Items from one screen size to the next? I love to fine-tune how things look on smaller screen sizes when needed. I would say you can call me old school and things just bug me when they are not presented correctly.
Thank you so much for your help.
Hello,
Thanks for your patience!
The background-position is a standard CSS Property: https://www.w3schools.com/cssref/pr_background-position.php and not Bootstrap specific. For Padding/Margins, please consider checking this: https://getbootstrap.com/docs/5.2/utilities/spacing/ . You can check more about the Flex Justify Content here: https://getbootstrap.com/docs/5.3/utilities/flex/#justify-content .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you for your help and links to help me learn more and extend my skils.
Hello,
Very happy to help! :)
Please do let us know if we can help you with anything else or if you find any further issues.
I am confused about how you would inject this into the canvas layout code and custom CSS file. Can you please provide me with an example of how this would work with what I have for the intro image for this website?
https://swank-apple.cloudvent.net/
.device-xxl .background-image-class { background-image: url('image.jpg') !important; }
.device-xl .background-image-class { background-image: url('image.jpg') !important; }
.device-lg .background-image-class { background-image: url('image.jpg') !important; }
.device-md .background-image-class { background-image: url('image.jpg') !important; }
.device-sm .background-image-class { background-image: url('image.jpg') !important; }
.device-xs .background-image-class { background-image: url('image.jpg') !important; }
Hello,
Thanks for your Patience!
You will simply need to copy the above CSS Codes and paste them inside the css/custom.css File. by default, the css/custom.css File is already linked in the HTML File, so the CSS Changes added will be automatically applied. You can simply add the .background-image-class Class to the Slide BG DIV you want to apply the Responsive Background changes to. That's it! After this, you only need to define the image.jpg Path in the previously copied CSS Codes based on the responsive devices. Example: You can define image-mobile.jpg for .device-sm and .device-xs Devices, and image-tablet.jpg for .device-md Devices.
Based on our Support Policy: https://support.semicolonweb.com/support-policy/, we currently do not provide Customization Support or Generic HTML/CSS Support.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard