Banner Image for different screen resolution

[himani-123]

Hi Everyone,

On our customer portal we are using a banner image with company icons at end of two corners, when we resize the browser image adjusts itself and image icons gets hidden at both the corners.

Is there any way we can use two images in different container like one container for larger screen resolution >1280px. And other container having small size image to be used for smaller resolution windows 768-1280px. Is this possible to achieve in servicenow?

Thanks

[Deepak Shaerma]

Hi @himani-123 
Please determine the optimal resolution for your service portal’s background image. This often depends on the common screen resolutions of users or the standard resolution is optimized for. The aspect ratio (the ratio of width to height) and the exact dimensions are crucial to ensure the image covers the entire background without stretching or losing important content .For basic adjustments (cropping, resizing), free tools like Microsoft Paint, GIMP, or online editors (Pixlr, Photopea) might suffice. 
The recommended size for banners are: Home page banner: 1440 x 400px. Topic page: 1258 x 300px.
Please Mark this Helpful and Accepted Solution. If this Helps you to understand. This will help both the community and me..
- Keep Learning ‌‌
Thanks & Regards 
Deepak Sharma

[Deepak Shaerma]

Also refer below Link:
Service Portal Customizations 
Please Mark this Helpful and Accepted Solution. If this Helps you to understand. This will help both the community and me..
- Keep Learning ‌‌
Thanks & Regards 
Deepak Sharma

[Community Alums]

Hi @himani-123 ,

I checked your problem, may be this will help you 

Navigate to Service Portal > Portals 

Open Service Portal Record and Open home page i.e Index

Try to change the width to fixed or Fluid as per your requirement 

Please mark my answer correct and helpful if this works for you

Thanks and Regards 

Sarthak

[Himani_14 · Accepted solution]

Thanks @Deepak Shaerma and @Community Alums for your response. Adding below lines in Page Specific CSS resolved my issue.

@media only screen and (min-width: 768px) and (max-width: 1280px) {
.banner-container {
width: 100%;
height:250px;
}
}