I'm completely new to HTML and CSS. I've been working through a book titled The Missing Manual, CSS3 but I've hit a roadblock when it comes to changing the size of an image that I want to use as a background. In order to troubleshoot the issue, I created simple HTML and CSS files, but no matter what I try, the background-size property seems to have no effect at all. The image displays correctly and I can adjust the repeat behavior, but altering the size (whether using percentages or pixels) has no impact on the image dimensions. I even attempted converting the image to a PNG format, but unfortunately, this did not remedy the situation either. The image in question, 'sprial.jpg,' measures 292x288 px, making it so small that I might not end up using it after all.
For coding, I am utilizing Notepad++ for writing and Chrome for viewing the HTML file.
body {
background-image: url(https://cdn.pixabay.com/photo/2017/09/08/21/39/spiral-2730290__180.jpg);
background-repeat: no-repeat;
background-size;
50% 50%;
}<body>
<p> Hello
</p>
</body>