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.
Related
I want to include background image which is oversized (4000px x 3000px) in the div,
in such a way that width will take max width of the screen and height will adjust to it.
I don't know why but it doesn't work if the height is not specified (like 1000px).
The image doesn't appear at all.
I wanted to make jsfiddle but there it works (probably because height is somehow specified automatically)
The part of code (HTML):
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
The part of code (CSS):
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("path/to/my/image");
max-width: 100%;
width: 100%;
height: auto;
}
And with this code nothing appears (as it looks the height is 0px), how can i do the thing that height will adjust to size of width i.e. scales itself.
In your example, the div is inheriting the width of the parent section tag, taking into account any margin or padding on the body element. It has display: block so width is 100% , height is auto so it's the size of whatever inside. So in your case there's nothing inside the div tag, which means it's height: auto; value is 0.
.section-img {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: url("https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg");
max-width: 100%;
width: 100%;
height: 100px; // auto means 0 if there's nothing in your div element
display: block; // this is a default for every div tag
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Just try this replace the auto with 100% in height and check.
.section-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url(https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg);
max-width: 100%;
width: 100%;
height: 100%;
display: block;
position:absolute;
top:20%;
bottom:0;
right:0;
left:0;
}
<section id="panels">
<h1>PANELS</h1>
<div class="section-img">
<!-- here i want the image -->
</div>
</section>
Are you like this .
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 trying to build a simple fluid image that can resize based on screen size.
But I am having trouble to get the image smaller when the width of the browser gets smaller.
HTML:
<main>
<section class="slider-ctn">
<figure class="logo"></figure>
</section>
</main>
CSS:
.slider-ctn figure.logo {
margin: auto;
background-image: url('../Images/logo.200x100.png');
width: 200px;
height: 100px;
}
If you set the background-size to 100% 100% or cover the image will stretch to fit the container. Remove the width (or restrict the width by setting the parent's width) and set height: 0; padding-top: 50% on the figure to make the height of the figure half of the width, so the aspect ratio will match the image and be fluid.
* {margin:0;padding:0;}
.slider-ctn {
margin: auto;
width: 200px;
}
.slider-ctn figure.logo {
background: url('https://dummyimage.com/200x100/000/fff') top left no-repeat;
height: 0;
background-size: cover;
padding-top: 50%;
}
<main>
<section class="slider-ctn">
<figure class="logo"></figure>
</section>
</main>
Just add the following to your head tag with this code :
<meta name="viewport" content="width=device-width, initial-scale=1">
Another option using vw units and contain.
If you know the aspect ratio of your image you can use vw (view width) as your units for width and height.
I am using an image that has a 4x3 aspect ratio. If I want the width to always be 80% of the screen I will use 80vw. Then, my height will be 3/4 of my width, or 60vw.
Then be sure to use contain for your background sizing.
Try this css and see if it satisfies your needs:
.slider-ctn figure.logo {
margin: auto;
background-image: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 80vw;
height: 60vw;
border: 5px solid red;
}
You should add contain as background-size to your CSS:
.slider-ctn figure.logo {
margin: auto;
background-image: url('../Images/logo.200x100.png');
background-position:center center;
background-repeat:no-repeat;
background-size:contain;
width: 200px;
max-width:100%;
height: 100px;
display:inline-block;
}
Don't forgot to add position and repeat to background properties everytime when you use background images.
Also I added max-width to fit within the parent container if it is smaller than the logo container.
Example here
NOTE: Don't use cover in background-size because that will cut your
logo to fit only within width limits, contain will fit width and
height.
I think setting up the max-width of the image to 100% should do the trick.
.slider-ctn figure.logo {
background-image: url('../Images/logo.200x100.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
width: 200px;
height: 100px;
}
I am trying to use an image of 1658 by 1156 as a background image to a div of width 800px and height 100%. My target is to compress down the image to the size of the width using css but the image still overlaps the size of the div. This is my attempt:
<div style="margin: 0px; padding: 0px; width : 800px; height:100%" class="col-md-8 col-xs-8 col-lg-8">
<div class="panel panel-body" style="background-repeat: no-repeat; background-attachment: fixed; background-position: center; overflow-scroll: none; width : 800px; height:100%;z-index: 1; padding:2px; border: black solid thin;background: url(resources/img/bck.JPG) center top">
Please how can I compress the image down to the size of the div
Try background-size: cover
<div class="panel panel-body" style="background-image: url('http://www.soar-nj.com/media/k2/galleries/1176/fhpeqpl5.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; width : 800px; height:100%; z-index: 1; padding:2px; border: black solid thin; background-size: cover; ">
Solution without cropping the image (Using background-size: 100% 100%;).
It will span the image to 100% width and 100% height but that will stretch the image since image is larger than the container. So, I would recommend that you use background-size: cover or use an image with less resolution.
<div class="panel panel-body" style="background-image: url('http://www.soar-nj.com/media/k2/galleries/1176/fhpeqpl5.jpg'); background-repeat: no-repeat; width : 800px; height:100%; z-index: 1; padding:2px; border: black solid thin; background-size: 100% 100%; ">
DEMO
That will scale the background image to be as large as possible so that the background area is completely covered by the background image.
You can simply set the height of your DIV to 557px and then use background-size:cover
OR
You can use background-size: 100% 100% and apply overflow:hidden to your DIV.
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;
}