Center fixed background of container

Question

I want to create a header with a fixed background. So I defined the following properties:

header {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 300px;
    display: block;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

Now I have the following problem. Currently, the background is centered according to the Screen Width and Height. Since the header is at the top, the actual background of the header is just the top of the image. In addition, the header image section changes every time I change the screen height, which is not my goal.

I want the image to be centered within the header (center of the image is at the center of the header, but only if I have not scrolled down). In addition, the header image section should only change if I change the header width, height or screen width but not if the screen height is changed.

Temani Afif · Answer 1 · 2019-10-07T22:54:35.817

You can rely on vh unit combined with some calc(). The center is initally 50vh and you want it to be 150px from the top so we need a translation of 50vh - 150px. You should also get rid of cover if you want the image to not change when the screen height change but it may not render like you want.

_{I replaced 300px with 100px for the demo.}

.header {
  height:100px;
  border:1px solid;
  background:
    url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
  background-attachment:initial;
  background-position:center;
  margin-top:20px;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="header">

</div>
<div class="header not-fixed">

</div>

With the use of cover

.header {
  height:100px;
  border:1px solid;
  background:
    url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
  background-attachment:initial;
  background-position:center;
  margin-top:20px;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="header">

</div>
<div class="header not-fixed">

</div>

You can clearly see how the first image is centred exactly like the second one without fixed

To get more details about the caluclation check this: Using percentage values with background-position on a linear gradient (the section Combining pixel and percentage values)

Thanks, it looks much better now. But one issue is still there. The image has a size of 1000x666 px. But I do not want to see the viewport to change when I change the screen height. — Kaskorian, Oct 07 '19 at 22:47
@Matze the only way is to not use cover. With cover it's impossible. Check the update where I removed cover — Temani Afif, Oct 07 '19 at 22:49

score 0 · Answer 2 · answered Oct 07 '19 at 22:38

0

Try to wrap the img (outside the header div) and header div and play with position relative/absolute to superimpose header on top of the image.

Having done that, you can use z-index to push image backwards

answered Oct 07 '19 at 22:38

Navjot Cheema

11
1

Center fixed background of container

2 Answers2