How to keep a background image quality crisp?

user_12262256 0
Viewed 905

I work with a survey platform and in this survey platform I am using a pre-defined template for my survey. The platform allows for CSS "modifications" and I'm trying to get the header image quality to keep from reducing. The image is uploaded as 1170*295 but needs to be displayed as 760*192.

The platform offers a simple image header uploading option but only for a certain size. My image has a lower "height" than their standard.

Things like image-rendering: crisp-edges; (or -webkit-optimize-contrast) are not doing anything. The "end text" displays in blue color (yes, I am a complete beginner and programming in any form is not part of my job).

Header image

div.questionnaire-header {
   background: url("/images/uploaded/ANFCZ1FSC5C2?width=760&height=192") no-repeat center left;
}

I hope the header image is displayed with clear, crisp text and not blurry.

background-image css image html
3 Answers

Set the background-size property to 100% so our image fills the image element. Set the background-position property to 50% 50% to align the background image within the image element.

user_75790840

Your image is stretching to meet the size of the header. There's no real easy way to upscale an image in css and retain quality. Either change the width of the header to 760px or find an image larger than 1170 x 295

user_39544800

Set the background-size property to 100% of your image to fills the image element.

user_122625920
Related