0

Currently when I resize the window the div gets less wide but the image stays pinned to the left. So if I'm looking at it on a mobile browser, I see the left side of the image. I can't figure out how to always be looking at the center of the image while when resizing the image gets wider on the left and the right. The image is 2560 by 677.

Here's the CSS I have right now:

#showcase {
position: relative;
margin: auto;
min-height: 600px;
background: url("banner.png"); }
#showcase .primary-overlay {
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

And here's the relevant div:

<section id="showcase" class="py-5">
<div class="primary-overlay text-white">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="display-1 mt-5 pt-5">
<strong>FILLER TEXT</strong>
</h1>
<p class="lead">BLAH BLAH BLAH </p>
<div class="text-white display-4" id="countdown"></div>

Thanks for any insight.

Ashu Mhatugade
  • 80
  • 6
meowsoftly
  • 61
  • 5

1 Answers1

1

Use background-position to position the background within the element. And you maybe also want to use background-size to tell the image how to resize.

#showcase {
    position: relative;
    margin: auto;
    min-height: 600px;
    background-image: url("banner.png");
    background-position: center;
    background-size: contain; /* or cover */
}
ngearing
  • 1,325
  • 11
  • 18