Ask coding questions

← Back to all posts
SOLVED: Cut Image Banner HTML/CSS

Hello all,

I am trying to create a button using an image banner, but I need it to resize an image, but cut off everything outside of the div.

I am not sure how to do that.

If you are not sure what I mean, check out the picture banner at the top of




This type of header is called a hero image. It can be created by the CSS and HTML listed below:


Make sure to use ##px in the CSS when setting a specific height of the div. If you don't use pixels (like using percent values) then the image will not show up.


I learned something from this:
however, the fox is not showing up. I will mark your answer as the answer if you can figure it out.

This might help:


A really simple way would be to crop the image on your computer and then put it on there.


Simple, yes, but time intensive. I am sure I will have more than 5 of these, and they would take a while to crop by hand. I also need them to be resized with the webpage, so I would need 3 different cropped images each time I want to do something like this. @LordPython404


Could you post the link to your repl so that I can see it?


I haven't created the project on replit yet, but even if I did it probably wouldn't help (it's a big project). Was kind of hoping for a css or html thing I could use to do it. @LordPython404


Okay, I created a really simple version for you to play with. Basically, I want the fox to be displayed so it is a 500x500px image, but for it to be cut off by the div (it should work at any height).

Any way you can get it working I would be happy with, as long as it doesn't require manually resizing the fox image.

Thanks for the help!