how to make background perfect

Question

hello. me pablo

i made a code for a challenge but the background is not looking good i think because it Quality and size is not perfect for screen, can someone tell me how can i make it look perfect and fine

https://sololearn.com/compiler-playground/WNqze86Ku70c/?ref=app

Answer 1

You can:

1. (Can be used together with solution 2) Use a higher resolution image, the original image itself is not too clear so it becomes even blur when set on a non-perfect screen. You can upscale the image with some online AI tools, like: https://imgupscaler.com

2. Use media queries to use a different url(maybe for the same image but a higher/lower resolution one) for larger/smaller screen sizes. Like:

/* Default background (for large screens like PC) */
body {
background-image: url('your-image-large.jpg');

/* For tablets and similar screen size */
@media (max-width: 768px) {
body {
background-image: url('medium-image.jpg');
}
}

/* For mobile screens */
@media (max-width: 480px) {
body {
background-image: url('small-image.jpg');
}
}

Answer 2

I was going to recommend the same thing.However Afnan Irtesum Chowdhury was quicker. Because I tested it. Here's a link to higher quality image.
https://i.ibb.co/7N64SXct/sky-background-video-conferencing-23-2148630092-HD.jpg upscaled with the image upscaler

Answer 3

Thankuu Chris Coder and Afnan Irtesum Chowdhury brothers!!! you both helped me equally to I can't mark one solution as best 😁🫂♥️

Answer 4

Chris Coder Afnan Irtesum Chowdhury I'm to use a simple sky background without clouds, what you both think? 🤔🤔

Answer 5

Pablo🚀 Simple sky background with out clouds would simply be a blue gradient background. Can be done with CSS or with a search online. https://wallpapercave.com/wp/wp8634803.png