Full background image in Service Portal

[gomathyshankar]

Hi,

I am trying to add a background image in Service portal but the entire image is not coming only half the image is coming.Could some please help me.

I am getting this now

But I want below mentioned entire image in the container

[chirag_bagdai]

Hello,

You need to apply CSS, take reference from Perfect Full Page Background Image | CSS-Tricks

[chirag_bagdai]

Hello,

Please ignore my previous reply.

Here is my response -

You need to resize your background image - Also, the pixel density is very low so my suggestion would be use some HD or good quality image.

[astha_chaubey]

Hi @chirag_bagdai ,

What is the ideal/recommended background size for a full cover background?

Thank you,

Astha

[nathanfirth]

There is no good way to get the whole image to be visible and still fill the whole space. This is a responsive website so that the "container" can be really wide... or not so wide depending on the resolution and size of the browser window. But to answer your question, to make the whole image fit all you have to do is the following:

1. Add a class to the background image container record (for example: "img-contain")
2. Add a style on the page or in the theme that sets that class as follows:
   .img-contain {
           background-size: contain;
           background-repeat: no-repeat;
   }
   
   

However let me illustrate what happens when you make the whole image fit in the container: