CODEWITHSUNDEEP
htmlcss
ESF
ESF

Reputation: 19

background-size: cover is not covering the div but it overflown

enter image description here

If you see the image of mine where i gave the same style as told in youtube video and in that video the image is covered the div width and height

But when i tried the same my image is overflown instead of cover exactly to the div dimensions

why it has happened to my code but not for him in the video?`

#service-image {
  height: 400px;
  width: 70%;
  
  background: url("../images/lesson\ img-2.jpg");
  /* background-repeat: no-repeat; */
  /* background-size: 50px 100px;  */
  /* background-size: contain; */
  background-size: cover;
}
<div id="service-image"></div>

    <h2 class="subtitle">Contact Us</h2>
    
    <form>
      <input type="text" placeholder="Full Name" class="input-form">
      <input type="email" placeholder="Email" class="input-form">
      <textarea></textarea>
      <button>Submit</button>   
    </form>

`

Upvotes: 0

Views: 49

Answers (1)

mohammad
mohammad

Reputation: 114

i think you have to use background-image:url(sth);width:100% and then give this style to not to overflow overflow:hidden; or if you want to show overflow with scroll overflow:scroll;

Upvotes: 1

Related Questions