Background image fitted

Question

I don't have code to showcase, but I am trying to have an img or background image fitted inside a container exactly and resizes when the screen gets resizes as well. Can someone help please?

Edit: I specifically want the background to remain fitted in the div

<!-- Intro Section -->
<section class="success" id="about">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 text-center">
                <h2>intro</h2>
                <!--<hr class="star-light"> -->
                <br>

                <p>
                    text
                </p>

                 <p>
                   text 
                </p>


            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-lg-offset-2">

            </div>
            <div class="col-lg-4">

            </div>
            <div class="col-lg-8 col-lg-offset-2 text-center">
                <a href="#" class="btn btn-lg btn-outline">
                    <i class="fa fa-download"></i> download
                </a>
            </div>
        </div>
    </div>
</section>
<!-- End of intro section -->


#about{

}

Possible duplicate of [How do I fit an image (img) inside a div and keep the aspect ratio?](http://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio) — Luca, Aug 10 '16 at 13:37

Mihai T · Answer 1 · 2016-08-10T16:15:49.367

0

use the background-size:contain property .

see snippet below. let me know if it works

#container {
  height:400px;
  width:100%;
  background:url("http://beerhold.it/579/300") no-repeat scroll center center / contain transparent;
}

<div id="container">

</div>

more info :

i suggested to use contain and not cover because :

A. Contain

Scale the image to the largest size such that both its width and its height can fit inside the content area

B. Cover

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

so as it says in the documentation ( info here ) , using cover doesn't resize the image if your container gets smaller than the background-image . but contain does exactly what you need.

if you want you can play with cover and contain to see the difference

to have both behaviors ( stretch and resize ) you could use media Queries ( there are a number of ways to do this. this is just an example )

with CSS is the only thng you can do. i think :)

i used @media only screen and (max-width: 579px) { because 579px is the width of the img in this example

see code snippet below or better see jsfiddle

#container {
  height:300px;
  width:100%;
  background:url("http://beerhold.it/579/300") no-repeat scroll  center top transparent;
  background-size:cover;
}
@media only screen and (max-width: 579px) {
#container {background-size:contain;}

}

<div id="container"></div>

edited Aug 10 '16 at 16:15

answered Aug 10 '16 at 13:38

Mihai T

17,254
2
23
32

It Semi-worked, but not completely. I get to see all the image in the container, but it overflows to the padding area and does not cover all the container – Kay Aug 10 '16 at 14:21
well you could use `@media queries` . so when the `container` is bigger than the `background-image` you should use `cover` and when the `container` is smaller than the `background-image` you should use `cover` – Mihai T Aug 10 '16 at 14:24
I used both of them. They all get cropped when resizing the screen. Which media query? – Kay Aug 10 '16 at 14:39
that's impossible because , as you can see in my example and in the given documentation , with `background-size:contain` the image will never be cropped. it will resize to fit the window and keep it's aspect ratio. can you edit your original question with your relevant code ? – Mihai T Aug 10 '16 at 14:41
It is not cropped. The full size is out, but it overflows and its not contained in the container itself. From the right side is a white background and it does not stretch the image to fit the container exactly – Kay Aug 10 '16 at 14:51
that's why i said you should use media Query . i will edit my answer – Mihai T Aug 10 '16 at 14:53
I will test this and see. I am not very familiar with @media queries – Kay Aug 10 '16 at 15:11

Background image fitted

1 Answers1