Set a background picture to a DIV that changes based on screen size

I am trying to get a hero image on a website. I would like the hero image to switch between a mobile and full image version, so I decided to go with background-image instead of I can't get the image to show up.

HTML

<section class="hero">
    <div class="">Random CTA</div>
    <div class="heroImage"></div>
</section>

CSS

.heroImage {     
background-image: url("/img/heroImageMobile.png") no-repeat center top;     
background-size: cover;     
height: 1200px;     
width: 800px; 
}

Eventually, this would be my media query, but I currently have it commented out

@media only screen and (min-width: 640px) {
    .heroImage {
    background-image: url("img/heroImageFull.png") no-repeat center top;
    }

I have Google this and followed the suggestions on other posts:

I have added height and width to match the image.
I have let VS Code fill in the path, so it looks correct. I tried img/filename, /img/filename, and ../img/filename
I tried with both PNG and JPG file

What am I missing?

Solution

You'll have to use the background property instead of background-image property which is more specific

background-image property only take the url path as value, not all properties

See this fiddle

See these resources

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image https://developer.mozilla.org/en-US/docs/Web/CSS/background