Issue with site showing up responsive

html-css

#1

I am trying to have the background images on my desktop site, show up responsive on my mobile but it is not working. I cannot seem to figure out what is going on, especially since when I test the code in googles dev tools, the pictures look the way they should. I have tried media queries with a different picture as well. Below is the code for my css and my media query. Any help would be highly appreciated!!

HTML:

Reliable, Quality & Service

Founded on the principle of merging value and attention to detail, to create a landscape you've always dreamed of. Unparalleled customer service drives us to exceed expectations, one home at a time.

Our Customer Commitment

Upfront Value • On-time ServiceAbove and Beyond Follow Through • Honored Promises

	</div>
</div>

CSS:
.coverone {
background: url(“images/exterior-stock1.jpg”);
width: 100%;
background-attachment: fixed;
background-size: cover;
padding-top: 200px;
padding-bottom: 500px;
}

.content-first {
display: flex;
}

.left-box {
width: 40%;
margin: auto;
text-align: center;
padding-left: 5%;
}

.right-box {
width: 40%;
margin: auto;
text-align: center;
padding-right: 5%;
}

@media only screen and (max-width: 500px) {

.coverone {
background:url (“images/smaller-bg1.jpg”);
background-position: center;
background-size: cover;
}
}