CSS background-image: never show the bottom 35 pixels of the image

Question

My HTML template (responsive, created with Bootstrap) has a header with a background image.
Here's a simplified version (the <header> and its CSS are exact copies, the rest is simplified):

.bgimage {
  width: 100%;
  height: 400px;
  background-repeat: no-repeat;
  background-size:cover;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header class="bgimage" style="background-image: url('https://i.stack.imgur.com/hjPqu.png'); background-position: 50% 0%;">
      <h1 class="display-1 text-center">this is the title</h1>
     </header>
    <p>this is the content</p>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </body>
</html>

The website has many pages with image galleries.
For each gallery page, I pick one of the gallery images and use it as the background-image in the header, so each page has a different header image.
(and the background-position: x% y% values are also set per page, depending what makes sense for the respective image)

So I have:

many different header images
many different background positions
depending on the viewer's screen resolution, different parts of the respective header images are visible/invisible to the viewer

However:
All of the gallery images are "watermarked" with my site logo at the bottom right, like in the image I used in the example:
example

As I'm reusing the same image files as the background-image in the page headers, sometimes the whole logo or parts of it are visible in the header and I'd like to avoid this.
(if you run the snippet above, click on the "Full Page" link and resize the browser, you'll see the logo appearing/disappearing)

The logo is always the same size and the same amount of pixels away from the image's bottom...so just completely "hiding" the image's bottom 35 pixels would be enough.

So here's my question:
Is there a way to define a background-image in a way that the image's bottom 35 pixels are NEVER visible?
I.e. even if I set background-position: bottom, I'd like to see the visible part of the image start 35 pixels from the actual bottom, so my site logo is hidden.

I've seen CSS Display an Image Resized and Cropped, but I can't just set sizes in pixels, because my images are in many different sizes.

Brett Donald · Accepted Answer · 2023-02-06T06:49:45.477

Not exactly, but you could clip off the bottom 35 pixels of the element to which the background image is attached. You’ll need to add bottom padding to prevent any content being clipped, and then a negative bottom margin to recover the white space resulting from the clip.

clip-path: inset(0 0 35px 0);
padding-bottom: 35px;
margin-bottom: -35px;

I think this would have the desired effect without any serious side-effects. The only trouble you might have is if you are using background-size to scale your background image larger, or using cover or contain, because if you are, the height of the watermark might end up being more than 35 pixels. In that case, you may be able to substitute the fixed 35 pixels with a calc expression including viewport width units vw.

#d1, #d2 {
  background-image: url(https://i.stack.imgur.com/hjPqu.png);
  background-position: bottom left;
}
#d2 {
  clip-path: inset(0 0 35px 0);
  padding-bottom: 35px;
  margin-bottom: -35px;
}

<div id="d1">
  One<br>
  Two<br>
  Three<br>
  Four<br>
  Five<br>
  Six<br>
  Seven<br>
</div>
<p>Content between</p>
<div id="d2">
  One<br>
  Two<br>
  Three<br>
  Four<br>
  Five<br>
  Six<br>
  Seven<br>
</div>
<p>Content between</p>

CSS background-image: never show the bottom 35 pixels of the image

1 Answers1