CODEWITHSUNDEEP
csswordpress
Overloard
Overloard

Reputation: 235

Image not covering container on smaller resolutions

I tried solving the problem myself, but I can't do it.

Go to my site here:

http://digesale.com/

And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...

On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.

This is the code I use to put that image there:

<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">

Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?

Thank you.

Upvotes: 1

Views: 67

Answers (2)

Felix A J
Felix A J

Reputation: 6490

Try the below CSS

.background {
  background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
  background-size: contain;
  width: 100%;
  height: 26vw;
}

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

If you need to cover you can use the image as a background:

 <div class="background"></div>

and in the css

 .background {
     background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
     background-size: cover;
     width: 100%;
     height: 100%;
 }

The important part is background-size: cover because it fill the entire div in all cases.

EDIT

If you want another behaviour, you can use your old img tag

 <img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">

And the css

 .responsive-img { 
     margin-bottom: -20px; /* this was writting in inline style. */
     width: 100%;
     height: auto;
 }

Upvotes: 2

Related Questions