CODEWITHSUNDEEP
jqueryhtmlcss
cristi
cristi

Reputation: 397

How can I get to see the full image in the background?

I have this site:

link

At the bottom there are two images, unfortunately these images can not be seen completely.

You can open the original image in a new tab to see exactly how it looks.

To me it sees about 90% of image

CODE HTML:

<div class="entry-content" style="height: 391px;">
        <div class="sus"></div>
        <div class="jos"></div>
        <div class="jos2"></div>
</div>

CODE CSS:

.sus{
  width:100%;
  height: 60%;
  position:absolute;
  top:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/BANNER-300x215.png") no-repeat center center #B03D3D;
  background-size:cover;
}

.jos{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS2-300x246.png") no-repeat center center #B03D3D;
  background-size: cover;
}

.jos2{
  width: 50%;
  height: 40%;
  position:absolute;
  bottom:0;
  right:0;
  background:url("http://bagel.dg-site.com/bagel/wp-content/uploads/2015/07/NEWS1-300x246.png") no-repeat center center #B03D3D;
  background-size: cover;
}

So I thought to do pictures ... you tell me please what is wrong and how to fix the situation so the image to see full?

Thanks in advance!

Upvotes: 1

Views: 51

Answers (3)

Christophe
Christophe

Reputation: 2200

To see the full image change your CSS :

instead of background-size: cover; use background-size: contain; then you'll see it completely.

The problem is that then the image has borders on the left and right.

Upvotes: 1

dreamweiver
dreamweiver

Reputation: 6002

The background-size css property with value cover does not show you the complete image.

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area- source :W3Schools

So if you need full image use

background-size:100% 100%;

Live Demo @W3Schools :http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try 100% background-size like,

.jos{
   ...
   background-size: 100% 100%;
}

.jos2{
   ....
   background-size: 100% 100%;
}

Upvotes: 1

Related Questions