Find your people. Pick a challenge. Ship something real. The CreatorCon Hackathon is coming to the Community Pavilion for one epic night. Every skill level, every role welcome. Join us on May 5th and learn more here.

esc-theme-includes.css ESC PORTAL BACKGROUND IMAGE

Jeff W NZAO B
Mega Guru

Hello, 

Please I'm trying to configure the css of my esc background image so that the image will be responsive and will not be cut. I updated the esc-theme-includes.css file, and i defined the css parent with the name "esc-homepage-cover " in the Employee Center Homepage - Container 1 page, but the image is still cut on the top and the bottom.

 

Here is the code I added with the sys-id of the image uploaded in the db_image table.

.esc-homepage-cover {
  background-image: url("/sys_image.do?sys_id=f05522cc9fa622107f447b966124ab9f") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  min-height: 400px !important;
  width: 100% !important;
  display: block !important;
  border: 4px solid red !important; /* test visuel */
}

Thanks for your help

JeffWNZAOB_0-1751329172780.png

JeffWNZAOB_1-1751329290039.png

 

 

1 REPLY 1

GlideFather
Tera Patron

Hi @Jeff W NZAO B,

not a CSS expert, but try something similar to:
img {
width: 100%;
height: auto;
}

_____
Answers generated by GlideFather. Check for accuracy.