CODEWITHSUNDEEP
htmlcss
Ben
Ben

Reputation: 9001

CSS attribute 'contain' not working

I want to be able to display the entirety of an image within a div.

I'm having difficulty displaying an image with the background-size property set to contain - it does not display the whole image, only the centre, at the full size of the source image.

JSFiddle

Code 

#header {
    background: rgba(0, 0, 0, 0.8);
    color: #ccc;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 20px 0;
}

#header .logo {
    width: calc(100%/3);
    height: 75px;
    margin: 0 auto;
    background-size: contain;
    background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
}
<div id="header">
  <div class="logo"></div>
</div>

Upvotes: 2

Views: 786

Answers (5)

user4641575
user4641575

Reputation:

Change positions background-size and background.

Write something like this:

background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
background-size: contain;

It's because background property overwrites background-size :)

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

Styles will be applied from top to bottom, hence style background-size:contain; is overwritten by position described in background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;

You need to add background-size:contain; below the background:. Updated Fiddle

#header {
  background: rgba(0, 0, 0, 0.8);
  color: #ccc;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  padding: 20px 0;
}
#header .logo {
  width: calc(100%/3);
  height: 75px;
  margin: 0 auto;
  background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
  background-size: contain;
}
<div id="header">
  <div class="logo"></div>
</div>

Upvotes: 2

Bluety
Bluety

Reputation: 1909

This is because you overwrite the first property, you must move background-size property after background, like so:

#header .logo {
    background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
    background-size: contain;
}

This is because the shorthand background property will overwrite all preceding background-* properties whether they're included in the shorthand or not.

Shaggy comment

Upvotes: 5

Mo.
Mo.

Reputation: 27465

Specifying the Background Size using ‘contain’ or ‘cover’ The two other possible values for background size are the keywords contain and cover. If the contain keyword is used, the background image is scaled, while preserving the image’s original proportions / aspect ratio, so as to be as large as possible providing that it is contained within the background positioning area, ie. neither the image’s width or height exceed the background positioning area. As such, depending on whether or not the proportions of the background image match those of the background positioning area, there may be some areas of the background which are not covered by the background image. If the cover keyword is the used, the background image is scaled, again preserving the image’s original proportions / aspect ratio, this time to be as large as possible so that the background positioning area is completely covered by the background image, ie. both the images width or height are equal to or exceed the background positioning area. As such, again depending on whether or not the proportions of the background image match those of the background positioning area, some parts of the background image may not be in view within the background positioning area.

#header {
  background: rgba(0, 0, 0, 0.8);
  color: #ccc;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  padding: 20px 0;
}
#header .logo {
  width: calc(100%/3);
  height: 75px;
  margin: 0 auto;
  background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
  -webkit-background-size: contain;
          background-size: contain;
}
<div id="header">
  <div class="logo"></div>
</div>

Upvotes: 1

Tanya Sinha
Tanya Sinha

Reputation: 634

you need to add background-size:contain; after background

#header {
background:rgba(0, 0, 0, 0.8);
color:#ccc;
text-align:center;
position:absolute;
top:0;
left:0;
width:100%;
z-index:3;
padding:20px 0;
}
#header .logo {
width: calc(100%/3);
height:75px;
margin: 0 auto;
background: url(http://startupweekend.org/wp-content/blogs.dir/1/files/2013/04/CokeLogo1.png) no-repeat center center;
background-size:contain;
}

Upvotes: 1

Related Questions