Widen image while maintaining its adaptability to screen sizes

[insidrsports1]

Hello,

At my current site I’m not able to adjust the Timeline image toward the bottom of the page past a certain width on my home page. I want to make it wider, but am not able to do so. Can you instruct me as to how to make the image wider without changing its alignment and still allowing it to adapt to different screen sizes?

https://www.insidrsports.com/

Thanks!
Kevin

[nico]

Hi @insidrsports1,

Thanks for writing in.

You could use the functionality explained in the link below:

Hide During Breakpoint - Explained

Hope it helps.

Let us know how it goes.

Thanks.

[insidrsports1]

This was super helpful so thank you! However, I still have a question - is there a way to make the image I’m referring to bigger when it’s being viewed on a sizable screen? It’s not extending to the edges of the page, and I’d like it to, if possible. Would be great if it could just respond to the page width appropriately. Is that possible?

[ruenel]

Hello There,

Thanks for updating in!

We could not check your background image since your site is under in construction mode.

You may need to review how the background images works. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.