Trying to put my backgorund image in a Div element, but it's repeating

I'm trying to put my background image in a div element, but it's repeating vertically when I add the div, even with background-repeat: no-repeat; my inspect tool says I'm getting overflow. How would I stop this from happening?

<head>
<style>
    body {
        background-color: rgb(21, 32, 43); 
        
    } 
           
    div {
        
        background-image: url("chewy.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;

        height: 200px;
        
    }
           
    </style>

    
</head>

<body>
 <div>
    stuff here
</div>

</body>

Solution

Make a class

    <head>
<style>
    body {
        background-color: rgb(21, 32, 43); 
        
    } 
           
    .header-box {
        
        background-image: url("chewy.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;

        height: 200px;
        
    }
           
    </style>

    
</head>

<body>
 <div class="header-box">
    stuff here
</div>

</body>

make a class maybe

.header-box { background-image: url("chewy.jpg"); background-size: contain; background-repeat: no-repeat; background-position: center center; height: 200px; }