-1

I made such background for my div

enter image description here

But when I make screen-size smaller, then you can see white space here:

enter image description here

So how I can fixed this?

        <div className="bg-home-page">

            <div className="box-discount">
               //some code
            </div>
        </div>

.bg-home-page
    display: flex
    align-items: center
    justify-content: flex-end
    background-image: url('../../assets/bg1.jpg')
    background-repeat: no-repeat
    background-position: center center
    background-size: 100%
    min-height: 550px
ewertoncodes
  • 468
  • 3
  • 11
Gover123
  • 69
  • 6
  • You can align the background to the top with background-position: top center or use background-size: cover to fully cover the div. – Kees Hak Jul 26 '20 at 17:23
  • @KeesHak when i use **background-position: top center** it makes **div** with height like **100vh** (it cover all screen).. and when i use **background-size: cover** - it cut my background – Gover123 Jul 26 '20 at 17:29
  • That is because you use min-height. Another suggestion is not to use min-height and not use the image as a background-image but simply use the HTML img element with a display: block and width: 100%. – Kees Hak Jul 26 '20 at 19:16
  • Get rid of those other background properties, then: `background:center / contain no-repeat url('../../assets/bg1.jpg');` – StackSlave Jul 26 '20 at 23:05

1 Answers1

0

In such a this situation, Never use min-height because it makes the quality of image decrease's. Probably your parent can't control the child. your background-image should be top center and background-size: contain; if it doesn't work make a jsfiddle or codepen with your codes i can fix it quickly but your snippet its hard to figure out i need your parents styles too. look at these demos (they can help you) : https://www.webfx.com/blog/web-design/responsive-background-image/

SoliMoli
  • 781
  • 2
  • 6
  • 25