Use an SVG as background to an anchor element

I just started out with web development and am trying to build a simple tabbed website. I need an svg to fit perfectly behind an anchor element for all screen sizes but it shrinks down at lower sizes. Here's my HTML:

            <div id="seconddiv">
                <h1>Example</h1>
                <nav>
                    <a class="uls" href="index.html"><p>HOME</p></a>
                    <a class="ul" href="booking.html"><p>BOOK NOW</p></a>
                    <a class="ul" href="contact.html"><p>CONTACT US</p></a>
                </nav>  
            </div>  

The CSS goes like this:

.uls {
background: rgba(0, 0, 0, 0) url("../img/tab.svg") no-repeat center;
background-size: contain;}

Here's what it looks at standard size: Standard Size

Here's the reduced size: Reduced Size