how do i get this background image to be in the center of the header?-CodePudding

header {
    background-image: url('tiredBOX.jpg');
    border: solid 3px orange;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    padding: 30px;
    
    
}

}
h1 {
    text-align: center;
    color: orange;
    background-color: lightgrey;
    border: dotted white 4px;
    margin-right: 600px;
    margin-left: 600px
    

    
}
body {

    background-color: teal;

}

have i gone about this wrong or is there a simple bit of code to get the background image and border etc into the center of the header area?

CodePudding user response：

You can use margin: auto; under the header.

CodePudding user response：

To center background Image:

background-position: center;

CodePudding user response：

header {
    background: url(https://images.pexels.com/photos/210205/pexels-photo-210205.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1) center center no-repeat;
    border: solid 3px orange;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    padding: 30px;    
}


h1 {
    text-align: center;
    color: orange;
    background-color: lightgrey;
    border: dotted white 4px;
   /* margin-right: 600px;
    margin-left: 600px;*/    
}
body {
    background-color: teal;
}

<header>
  <h1>Answer</h1>
</header>

CodePudding user response：

try:

  background-size: contain; // or cover depending on your preference
  background-repeat: no-repeat;
  background-position: center center;