How could I use img-responsive of bootstrap to a div as follows:
<div class="fill" style="background-image:url
('./images/abc.jpg');">
</div>
While I am trying to add img-responsive class inside the div along fill it doesn't work. How could I make the background image for the above div responsive?
div {
background-image:url('./images/abc.jpg');
background-repeat:no-repeat;
background-size:contain;
}
If the background-size property is set to "contain", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image's width and height):
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
If the background-size property is set to "100% 100%", the background image will stretch to cover the entire content area:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
If the background-size property is set to "cover", the background image will scale to cover the entire content area. Notice that the "cover" value keeps the aspect ratio, and some part of the background image may be clipped:
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Look, there is a nice technique using background-size property
.fill {
background: url(path/to/img.jpg) center center no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
This rule will make your background image cover all container space and adjust when scaling the window.
Use background-size property to the value of 100% auto to achieve what you are looking for.
For instance,
.fill{
background-size:100% auto;
}
Related
I use an image as a background image, background-image: url(), and I also use this image placed inside <img src="">
It looks like the height of src image is shorter the height of the background image.
If I set a height for src image equals height of the background image, the src image will be disturbed.
What CSS properties should I set to make src image have the same height as background image, but it won't disturb the src image? Please note: I need to adjust ONLY in src image, not background image.
Please take a look at my sample in jsfiddle
HTML
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
CSS
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
/* height: 353px; */
}
Please note: Because the image I use is long, I have to set width: 100% for img. If I don't set that, a navigation bar will show at the bottom of the browser.
Consider object-fit and object-position
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
height: 353px;
object-fit:cover;
object-position:center;
display:block; /*to make it behave as div and avoir whitespace issue*/
}
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
Related for more details: Object-fit On A Canvas Element
Add position:fixed in CSS class. Then you can adjust the height.
.imageBG {
background-image: url("https://library.danahall.org/wp-
content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
position:fixed;
}
img {
width: 100%;
height: 353px;
}
Just add a class to the img containing div and set its height to 353px.
.image-container {
height: 353px;
}
img {
height: 100%;
width: 100%
}
As i see you src image is right and what you background image is doing is scaling the image to make it fit 100% and also your 353px, so your src image height was'nt wrong, it was the backgorund
if you use math and right proportions you would get this:
height: 252px; // this is the right proportions
right math one
I am 100% at a loss as to why I cannot get a background-image to display. I have tried multiple different images to rule that out. I have also changed src to url, changed the background-size from cover to auto 100%. Nothing I do will get the image to display.
Does anyone see why my background image will not display?
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: auto;
position: relative;
}
<div id="home-img">
</div>
Here is jsfiddle
If you use backgound-image and you don't have content inside div, you always should set height. Here is example https://jsfiddle.net/5pphkLmt/5/
<div id="home-img">
</div>
#home-img {
background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-position: 50% 50%;
width: 100%;
height: 540px;
position: relative;
}
Using Chrome Inspect, I changed the #home-img height from "auto" to 537px and then the image appeared. So updating the height is one option to fix this issue.
Another option is covered in this SO Q&A entry.
How to get div height to auto-adjust to background size?
you should add height to your code or put something in this DIV, just test height: 100px; and enjoy it :)
I have the following HTML:
<div class="jumbotron">
<div class="container">
<h1>Souplesse</h1>
<p>Be a Good Sport</p>
</div>
</div>
And the following CSS:
.jumbotron {
background-image:url('piscine.jpg');
height:300px;
background-repeat: no-repeat;
background-size: cover;
border-bottom:1px solid #ff6a00
}
.jumbotron .container {
position:relative;
top:50px;
}
My image is far too large to fit my height of 300px but I would like it to auto-resize and fit the height, so I can see all of my image. This must be simple but I can't see what changes need to be made.
Thanks
If you would like the background image to fit the height of your jumbotron, but don't care about if it stretches to the entire width:
.jumbotron { background-size: auto 100%; }
If you want the background image to cover the entire height AND width of the jumbotron and you do not care about the image's aspect ratio:
.jumbotron {background-size: 100% 100%; }
If you want the background image to be cover the entire height AND width the jumbotron but you DO care about the image's aspect ratio:
.jumbotron { background-size: cover; }
That last option will have some of the image cut off if the jumbotron has a different aspect ratio than the image, but you can specify how the image is positioned with the background position property:
.jumbotron {
/* Image in the center of container */
background-position: center center;
/* OR Image in the center top of the container */
background-position: center top;
/* OR Image in the center bottom of the container */
background-position: center bottom;
}
Try:
.jumbotron {
background-image:url('piscine.jpg');
height:300px;
background-repeat: no-repeat;
background-size: auto 100%;
border-bottom:1px solid #ff6a00
}
Note the:
background-size: auto 100%;
The first value is the width, the second value is the height. It is compliant to use px or % for those values.
Here is a Codepen with the problem I have:
http://codepen.io/rasmus/pen/pvXjOG
html:
<div></div>
css:
div {
background: url("http://placehold.it/600x300");
background-size: cover;
max-width: 600px;
height: 300px;
}
When I'm now resizing the div - because my viewport is narrower than 600px e.g. - the background image is "cropped" to the left side. But I want to have it "cropped" on both sides, so that I can still see the middle of the picture.
What's my mistake? I know it can be done. An Example would be http://comfortzonecrusher.com e.g.
Just use this:
background-position: center;
So your CSS becomes:
div {
background: url("http://placehold.it/600x300");
background-size: cover;
background-position: center;
max-width: 600px;
height: 300px;
}
Updated Codepen: http://codepen.io/anon/pen/xbowmZ
Try background-size: contain; on your div.
I have a header div, which I want to be fully covered with a background image. I want the image to be fully shown, so nothing is cropped. However, it seems to be stretching the image and cropping it.
css:
..header{
border-top-left-radius:5px;
border-top-right-radius: 5px;
max-width: 600px;
width:100%;
height: auto;
min-height: 200px;
background: url("img/bg-abstract.jpg") no-repeat fixed;
background-position: left top;
background-size: 100%;
position: relative;
background-attachment: fixed;
background-repeat: no-repeat;
}
What you need is
background-size:cover
background-size: cover Also try using % instead of px.