Set Size on Background Image With Css

Set size on background image with CSS?

CSS2

If you need to make the image bigger, you must edit the image itself in an image editor.

If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...

CSS3 _{^{unleash the powers}}

This is possible to do in CSS3 with background-size.

All modern browsers support this, so unless you need to support old browsers, this is the way to do it.

_{Supported browsers:}

^{Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.}

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

In particular, I like the cover and contain values that gives us new power of control that we didn't have before.

Round

You can also use background-size: round that have a meaning in combination with repeat:

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

This will adjust the image width so it fits a whole number of times in the background positioning area.

Additional note

If the size you need is static pixel size, it is still smart to physically resize the actual image. This is both to improve quality of the resize (given that your image software does a better job than the browsers), and to save bandwidth if the original image is larger than what to display.

Dynamically size the background image to fit the window

The vh unit can be used to set the height of the backgrounds. In the following example however, I have used it to set the height of divs, and let the background images have auto width, 100% height:

body {  margin: 0;}
#menu {  position: fixed;  left: .5em;  top: .5em;  right: .5em;  padding: .5em;  background-color: rgba(255, 255, 255, .7)}
.item {  height: 100vh;  background-size: auto 100%;  background-position: center center;}
#item-1 {  background-image: url(https://dummyimage.com/200x100/FC0/FFF&text=Background+Image);}
#item-2 {  background-image: url(https://dummyimage.com/200x100/F0C/FFF&text=Background+Image);}
#item-3 {  background-image: url(https://dummyimage.com/200x100/0CF/FFF&text=Background+Image);}

<div id="menu">  <a href="#item-1">Item 1</a>  <a href="#item-2">Item 2</a>  <a href="#item-3">Item 3</a></div><div id="item-1" class="item"></div><div id="item-2" class="item"></div><div id="item-3" class="item"></div>

Is there anyway to set background-size to both contain and cover?

By setting the background size to cover you are giving the browser the prerogative to adjust the image until it completely covers the area; it will ignore width and height values you assign.

With contain you allow the browser to decide how to adjust the image so that the entire image fits within the area, which may be based on height or width to accomplish this (depending on the orientation of the image wide or tall).

background-size: 100% 100% is probably what you're looking for, but that will disproportionately adjust the image (ie: stretch or compress depending on orientation). However, it does sound like that's what you want when you say "both cover and contain".

There are many ways to place and scale images used as backgrounds (where background does not necessarily mean the CSS background property)

Below is a simplified example of how I've accomplished this (assuming images that are roughly 700x300 px)

.container-wrap {
     width:100%;
     }
 .container {
     position:relative;
     padding:42.86% 0 0 0;
     /* where padding = the proportion of the images width and height
     which you can get by division: height / width = 0.42857 */
     }
 .container img {
     position:absolute;
     top:0px;
     right:0px;
     bottom:0px;
     left:0px;
     }

it is important that your images maintain a close proportion to each other -- if they are slightly off, the slight distortion shouldn't be visible to most people for most images

Again, there are other methods to accomplish this. The website you linked to applies a similar concept. The concept is the same, method is slightly different (for example they are using width:100% on the images instead of absolutely positioning them), where the concept = "using some sort of method to proportion the images to the container so it will magically scale"

Note that the same method can be applied to video containers (such as from YouTube).

Automatically reduce the size of a background-image set via CSS when there is not enough width

You should use background-size: contain, not background-size: cover, in combination with min/max-width.

Change your CSS like this.

#header-container .inner h1{
    background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left;
    background-size: contain;
    height: 85px;
    margin: 0;
    max-width: 432px;
}

Sample snippet

#header-container{  background-color: #053525; border-bottom: 1px solid #4DC386; padding: 10px 20px; position: relative;  width: 100%;  box-sizing: border-box;}#header-container .inner{ margin: 0 auto; max-width: 1000px; position: relative;}
#header-container .inner h1{ background: transparent url(http://apps.gwtrains.co.uk/apklibrary/wp-content/themes/apklibrary/images/logo-white.png) no-repeat center left; background-size: contain;  max-height: 85px; margin: 0; max-width: 432px;  position: relative;}#header-container .inner h1:before {  display: block;  content: "";  width: 100%;  padding-top: 20%;}

<div id="header-container"> <div class="inner">  <h1>  </h1> </div></div>

How do you adjust the background-image size with CSS?

You might consider using the jQuery plugin Backstretch.

CSS: How to set container size equal to background image size

Instead of using a background image, you could use a img element and set the containing div's display to inline-block. You'd then need to create an inner div to wrap the content and position it absolutely relative to the containing div. Since the img is the only thing in the flow, the containing div will resize relative to the image.

Pretty much a hack, but I think it would give the effect you are looking for.

http://jsfiddle.net/Km3Fc/

HTML

<div class="wrap">
    <img src="yourImg.jpg" />
    <div class="content">
        <!-- Your content here -->
    </div>
</div>

CSS

.wrap {
    display: inline-block;
    position: relative;
}

.wrap img + .content {
    position: absolute;
    top: 0;
    left: 0;
}

How can i set height and width of background image of button?

You should use background-image with background-size: 100%.

button{
  background-image: url("https://i.stack.imgur.com/gdaRR.png");
  float :right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: 100%;
  border: none;
}

<button></button>

Set Size on Background Image With Css