title: Rounded corners on background-image CSS
body: <p>I'm a total noob so sorry about this question. I'm trying to get an image that I have set behind my h1 text to have rounded softer corners so it isn't just a harsh rectangle. I'm simply practicing the very few things I know about html and css by making a mock restaurant page, and I didn't learn how to do this but I've been banging my head into the wall trying to figure it out for a couple of hours now. I can get the image to round-corners with border-radius: 50px; but only when it's below the text. I'm writing my code in notepad++ if it matters and I'm not sure if it has something to do with the resolution or size of the picture. I also tried putting it in a div after seeing some suggestions on here but no luck with that. Here's my code and some screenshots: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt; 
  &lt;html&gt; 
    &lt;head&gt;
      &lt;title&gt; Joe's Pizza Downtown GR &lt;/title&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lobster" type="text/css" rel="stylesheet"&gt;
      &lt;link href="style.css" type="text/css" rel="stylesheet"&gt;
    &lt;style&gt; 
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="header"&gt;
      &lt;h1&gt; Joe's Pizza &lt;/h1&gt; 
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:     </p>
  
  <pre><code>h1 {
    font-family: Lobster;
    color: Orange;
    font-size: 64px;
    padding: 40px;
    text-align: center;
  }
  
  body {
    background-image: url("cool-background.jpg");
  }
  
  .header {
    background-image: url("pizza-pepperoni.jpg");
    height: 400px;
    background-position: center center;
    border-radius: 50px;
    background-repeat: no-repeat;
    margin: 20px;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eQinv.jpg" rel="nofollow noreferrer">Screenshot of rectangle behind text</a></p>
  
  <p>Thanks anyone that can help :) </p>
  
  <p>EDIT:Fixed and final solution thanks!
  <a href="https://i.stack.imgur.com/JtV2E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JtV2E.png" alt="Fixed and final solution thanks!"></a></p>