Align image to the right but not move the entire section-CodePudding

I have a code here that has an image as the background of the h1 header section using CSS. What I want it to do is to put the image on the right. What I have tried is to use the float: right to try to align the image to the right of the header but instead, it moves the entire h1 to the right which I do not want to do. Is there a way to just move the image without moving the entire thing?

My code is here

h1{
    background-color: #002171;
    color: #FFFFFF;
    font-family:Georgia, 'Times New Roman', Times, serif;
    background-image: url(sunset.jpg);
    height: 72px;
    background-repeat: no-repeat;
    text-align: center;
    padding-bottom: .5em;
}

CodePudding user response：

For background image use

 background-position: right; instead of float :right

CodePudding user response：

You can use background-position to move the image to the right and this snippet also sets the background-size to contain so that the whole image is always seen whatever the header/viewport size dimensions and aspect ratio.

h1 {
  background-color: #002171;
  color: #FFFFFF;
  font-family: Georgia, 'Times New Roman', Times, serif;
  background-image: url(https://picsum.photos/id/1016/300/200);
  background-position: right center;
  background-size: contain;
  height: 72px;
  background-repeat: no-repeat;
  text-align: center;
  padding-bottom: .5em;
}

<h1>Heading</h1>