0
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?

Chris Atkins
  • 1
  • 1
    Does this answer your question? [Centering a background image, using CSS](https://stackoverflow.com/questions/2643305/centering-a-background-image-using-css) – RandomCoder Aug 30 '22 at 06:03

4 Answers4

0

You can use margin: auto; under the header.

Franz Zapanta
  • 69
  • 7
0

To center background Image:

background-position: center;
WOWnas
  • 11
  • 4
0

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>
Hilal Ashraf
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 02 '22 at 22:41
0

try:

  background-size: contain; // or cover depending on your preference
  background-repeat: no-repeat;
  background-position: center center;
RandomCoder
  • 395
  • 2
  • 10