WordPress Header 背景图片

Question

I am working on a WordPress website and have styled the templates header in CSS. I've given it a different background image and it's working, the only problem I have is on mobile.

On mobile there seems to be a white gap to the right of the image and I was wondering if anyone knows a solution to this?

Answer 1

You header element—

<header id="home" class="header menu-align-center" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
</header>

has a min-height:100px set. Increase that number until the image goes all the way across. Try 112px .

Answer 2

For images I learned for myself that it works best to define the container using an aspect ratio, so that it's forced to take up the space you want it to. And then make the image position: absolute inside the container and force it to fill the parent container using object fit: cover and set both lengths to 100%. The image will then automatically fill 100% height or width whatever of both is required:

<div class="image-container">
  <img src="...">
</div>

.image-container {
    &:before {
      /* create a 1px bar inside the container and stretch it according to padding-top */
      content: "";
      width: 1px;
      margin-left: -1px; /* 1px bar with -1px margin will make sure no space is taken */
      float: left;
      height: 0;
      padding-top: 50px / 150px * 100%; /* height / width ratio. So this would result in 3x as wide than high. 100% always refers to the width of the container which makes this trick work */
    }
    &:after { /* to clear float */
      content: "";
      display: table;
      clear: both;
    }

    img {
      position: absolute;
      width: 100%; 
      height: 100%;
      object-fit: cover;
    }
}

You can then also make the container switch aspect ratio by simply changing the .image-container:before{padding-top:;} in your media queries.

Also note that at best the <div> container would be replaced with a <picture> tag providing some different image sizes. Then you have performance increased and no extra DOM nodes as you need the picture tag anyways.