Background Images: How to Fill Whole Div If Image Is Small and Vice Versa

Background images: how to fill whole div if image is small and vice versa

Resize the image to fit the div size.

With CSS3 you can do this:

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

How Do you Stretch a Background Image in a Web Page:

About opacity

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Or look at CSS Image Opacity / Transparency

Fitting a large background image to fit in a small div

Define both width and height and then use background-size: cover

Make background image cover div by stretching, not maintaining aspect ratio

Turns out there was also a problem in the actual svg.
The solution below:

div {
  position: relative;

  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
  }
}

I removed the height and width parameters from my svg and also added: preserveAspectRatio="none"

How to fill background image?

I believe you want background-size: cover. Other background-size options.

Background Image Distorted when using cover and appending lots of images

Not 100% I get you, but you could try having two divs.

One div would contain your background image and be set to height: 100vh; and width: 100vw;. This will ensure the image will always stay the same size as the viewport and thus won't change size when things are added.

Under this div, you could have another, with a simple colour property set.

I.e.,

.bg-image {  width: 100vw;  height: 100vh;  background-image: url(someurl);  background-size: cover;  background-repeat: none;}
.bg {  background-color: grey;  height: 100%;  width: 100%;}

<div class="bg">  <div class="bg-image">    <!-- Place where the images go -->  </div></div>

How do i show the entire image in the container?

Try this. background-size:contain;

<html>

<head>
    <title>Javascript</title>
    <style>
        .section1{
    background-image: url('../Downloads/1.jpg');
    height: 600px;
    width: 100%;
background-size:contain;
}
    </style>
</head>

<body>
    <section>
        <div class="section1">

        </div>
    </section>

</body>

</html>

Display image original size, if possible, else shrink

I think you can achieve what you want with a combination of the two properties: max-width: 100% and max-height: 100%:

.container {
  display: flex;
}

.item {
  margin: 1rem;
  width: 200px;
  height: 200px;
  
  border: 1px solid;
  
  display: flex;
}

img {
  max-width: 100%;
  max-height: 100%;
  
  margin: auto;
}

<div class="container">
  <div class="item">
    <img src="https://via.placeholder.com/150x150" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/300x200" />
  </div>
  <div class="item">
    <img src="https://via.placeholder.com/200x300" />
  </div>
</div>

Background image with opacity and cover whole screen

You can combine multiple background images and stack them above each other. But then there is no way to control their opacity.

    .backgroundImage {
    background-image: url('http://www.css3.info/wp-content/themes/new_css3/img/sheep.png'), url('http://lorempixel.com/300/400');
    background-position: center bottom, left top;
    -webkit-background-size: 80px 60px, cover;
    -moz-background-size: 80px 60px, cover;
    -o-background-size: 80px 60px, cover;
    background-size: 80px 60px, cover;
    background-repeat: repeat-x, no-repeat;
    width: 100%;
    height: 100vh;
}

In your case the img tag is not closed. It should look like this <img src="Image.jpg">.

Further you can not specify the dimensions of an img with background-size: you should use width: and height:.

How to achieve background-image: cover CSS effect for dynamic images?

I ended up doing the following, without altering the html nor using other language:

PHP

$img_url = get_img_url();

HTML

<div>
  <img src="<?php echo $img_url; ?>">
</div>

CSS

div {
  width: 600px;
  height: 200px;
}

div img {
  min-width: 100%;
  min-height: 100%;
}

Background Images: How to Fill Whole Div If Image Is Small and Vice Versa