Canvas Support

banner image size

5 replies · opened Jun 29, 2021

JjazzyflashJun 29, 2021

How can I code a banner image to scale up to the size of the Browser window when expanded to fit the display monitor at full screen?
Thank you for your continued helpful support.

~jeff

SSemicolon WebSTAFFJun 30, 2021

Hello,

It is recommended to use the Image as Background Image of a Section with Background Size set to cover. Example:
[ch_pre]

[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

JjazzyflashJul 1, 2021

I used the code example that you have provided, however it has created more white space below the header above the image than the second example below. How can I minimize the the whitespace.

How can I make the image more responsive on mobile devices?

Here is my link:
http://jazzyinteractive.com/projects/IES3/contact10.html

Here is a link to a page example of how I'd like it to appear ,however this uses a foreground image

http://jazzyinteractive.com/projects/IES3/contact9.html

JjazzyflashJul 2, 2021

I need to find the best way to make the mobile version look good on all mobile devices and I'm finding it doesn't look great when translating a background banner image to mobile. How can I code to substitute the background banner with another image that looks better on mobile devices?

SSemicolon WebSTAFFJul 2, 2021

The Background Images used background-size: cover; CSS Property to make the Background Image fit properly according to the available viewport.

You can consider use the Responsive Classes to use different Background Images on different devices. Example:
[ch_pre type="css"].device-lg .custom-hero-bg {
background-image: url('images/hero-lg.jpg');
}

.device-sm .custom-hero-bg {
background-image: url('images/hero-sm.jpg');
}[/ch_pre]

Make sure that you add the .custom-hero-bg Class to the Element where Background Image is applied. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.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

You can add these Custom CSS codes in the css/custom.css File.

This will definitely work fine. 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