Offset Background Image

Question

How do I offset background image in such a way that the background only reveals the bottom half of the image from the top of the parent container while the other top half of the image is hidden as if the "overflow: hidden" command was applied to it.

i understand it can be done with background position, but how?

.container{
    background-image: url(./images/bg-pattern-circles.svg);
    background-repeat: no-repeat;
    background-position: center top;
    padding: 10rem 2.5rem 8rem;
    position: relative;
    border-radius: 0 7rem 0 7rem;
    width: 100%;
    text-align: center;
    color: hsl(0, 0%, 100%);
    line-height: 1.5;
}

.container::before{
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(hsl(237, 17%, 21%), hsl(237, 23%, 32%));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
}

<div class="container">
  <h3>State of the Art Infrastructure</h3>
  <p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast connectivity. This ensures your site will load instantly, no matter where your readers are, keeping your site competitive.</p>
</div>

This is an image of what I'm trying to achieve (the circle in the background). This is the image of the circle in the background.

Answer 1

I understand it can be done with background position, but how?

One way to do it is like this:

background-position: center -509px;

Since your background image is 1018px tall, you simply pull it up by half that amount.

Here's a demo:

.container{
    background-image: url(https://i.stack.imgur.com/AphEq.png);
    background-repeat: no-repeat;
    background-position: center -509px;
    padding: 10rem 2.5rem 8rem;
    position: relative;
    border-radius: 0 7rem 0 7rem;
    width: 100%;
    text-align: center;
    color: hsl(0, 0%, 100%);
    line-height: 1.5;
}

.container::before{
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(hsl(237, 17%, 21%), hsl(237, 23%, 32%));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
}

<div class="container">
  <h3>State of the Art Infrastructure</h3>
  <p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast connectivity. This ensures your site will load instantly, no matter where your readers are, keeping your site competitive.</p>
</div>