how to maintain background image responsive without bootstrap?

Question

#overlay {
 position: relative;
  height: 630px;
 background-position: center top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
 background-image:url("images/g.jpg");
   max-width: 100%;
 background-size: 100% 100%;
 
}
#overlay svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}


#inner-banner-image {
  padding-top: 100px;
  width: 90%;
   padding-left:750px;

  margin: auto;
  
}

#banner-content {
  padding-top: 6%;
  padding-bottom: 6%;
  overflow: hidden;
 background-color:rgba(255,0,0,0.3);
  margin-bottom: 12%;
  max-width: 660px;
  margin-top: 15%;
    height:400px;
}

<div id="content">
<div id="overlay">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none">
    <circle fill="white" cx="0" cy="100" r="100" />
    <circle fill="white" cx="200" cy="100" r="100" />
  </svg>
<div id="inner-banner-image">
                <center>
                <div id="banner-content">
               <h3> Let's Explore </h3>
                 <h1>Welcome to our GiftShop Store</h1>
                    
                    <a class="btn btn-1"
                     href="#innerwarp">Shop Now </a>
                    </div>
                </div>
                </center>
            </div></div>

I want to create a slanted div with a responsive background image. I tried all possible solutions but does not any work for me. I find only one solution but that gives me a compressed image.how to solve this? please, anyone, help. Thanks in advance

Possible duplicate of [CSS background image to fit width, height should auto-scale in proportion](https://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion) — Areg, Aug 18 '19 at 05:21

score 0 · Answer 1 · answered Jun 20 '19 at 18:21

0

Try something like this

#overlay {
  position: relative;
  height: 630px;
  background-position: center top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-image:url("images/g.jpg");
  max-width: 100%;
  background-size: cover;
}

you can also replace background-size:cover; with background-size:fill;

answered Jun 20 '19 at 18:21

Areg

1,414
1
19
39

@AYANADHIKARY I tried it locally, just remove `background-size:100% 100%` and it will work. – Areg Jun 20 '19 at 19:39

how to maintain background image responsive without bootstrap?

1 Answers1