Center background image with header

HTML & CSS
1

I have a JSFiddle here - https://jsfiddle.net/ow1x3e0a/14/

Simple CSS problem.

I have a header which I need to have an image on the side of. I can do this with a background image.

When the window is smaller I need to center the text and image so it appears in the center as it does on the left.

At the moment the text centers but the image stays on the left

I have tried it with without text-align but can’t center it with margin: auto:

.container{
    margin-top: 50px;
}
.header{
    font-size: 20px;
    padding-left: 110px;
    background-image: url(http://placehold.it/100x50);
    background-repeat: no-repeat;
}

@media only screen and (max-width:767px){
  .header{
      text-align: center;
  }
}
2

To centre a background image within its container use:-

background-position: center;
3

Then I just get this

4

What did you want to get?

The position should be in the query to only centre it on small screens.

5

On a large screen the image sits next to the header text, when the screen is made smaller the header text is centered, i need the image to move with the text so the image and the text are next to each other but sitting in the center of the screen

7

If you need them to move together, an image may be more suitable than a background, as a background isn’t a piece of content, so it can be difficult to manipulate unless you put it into its own container.

8

You could do something like this:

@media only screen and (max-width:767px){
  .header{
      text-align: center;
  }
  .header{background:none}
  .header:after{
    content:"";
    display:inline-block;
    width:100px;
    height:50px;
    background: url(http://placehold.it/100x50) no-repeat 0 0;
    vertical-align:middle;
  }
  
}
9

Or this

.container{
    margin-top: 50px;
}
.header{
    font-size: 20px;
    padding-left: 110px;
    background-image: url(http://placehold.it/100x50);
    background-repeat: no-repeat;
    width: 80px;   /* Added a width */
}

@media only screen and (max-width:767px){
  .header{
      margin: 0 auto;   /* Centre the whole header */
  }
}
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.