Ask coding questions

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

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 https://unity.com/

Thanks,
RGB

Voters
ReallyBasic
Comments
hotnewtop
ReallyBasic

Solved

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

HTML:

P.S.
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.

ReallyBasic

I learned something from this:
https://www.w3schools.com/howto/howto_css_hero_image.asp
however, the fox is not showing up. I will mark your answer as the answer if you can figure it out.

This might help:
https://stackoverflow.com/questions/21374534/css-background-image-not-loading
@LordPython404

LordPython404

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

ReallyBasic

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

LordPython404

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

ReallyBasic

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

ReallyBasic

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!
@LordPython404