So I have an image which is 700px width which is what I'm using as a background image in a div which is 200px width.
I want to keep the image at that size so it can maintain a good resolution for smaller devices.
However the issue I'm having is because the image is larger than the div the image overflows (hidden) but I want the image to resize and fit depending on the size of the div, instead of overflowing.
My div is currently:
.featurebox{
background: #F9C112 url(../img/pan1.jpg) no-repeat center top ;
width:200px
}
Define both width and height and then use background-size: cover
Try adding this:
background-size: 100% 100%;
if you use
background-size: 100%;
the height is set to auto, and can then still overlap.
can you try this?
background-size:100%;
You can set background-size:
.featurebox {
background: #F9C112 url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center top;
background-size: 200px 200px;
width: 200px;
height: 200px;
}
<div class="featurebox">
</div>
Related
Im trying to design a home page for my website where im using a div to show an illustration.
i want to use an image with the div that covers the entire size of the div.
the image dimensions are 1920x850.
this is the code for the div
<div class="custom-col col-md-12 col-sm-12" id="widget-static-block-1"></div>
the css:
#widget-static-block-1 {
background: url({{ d_banner1.jpg' | asset_url }});
width:100%; }
i want to be able to view the image on different screen sizes , but the it always gets cut off (either height or width)
ive tried playing around with height and width attributes to no luck.
If i set height:850px; then obviously it shows perfectly on a 1080p sceen but gets cut off on a smaller screen.
One thing i want to be clear about is that i want the entire image to show at all times at all browser sizes, i dont want it to be cut off via height or width.
Try background-size: 100% 100% or background-size: 100vw 100vh. If you want to be certain your div suits every media you can use vw and vh units.
It seems like you're asking for the div to fill the parent (height or width). And if you don't want the background image to appear cropped, you need to maintain the aspect ratio.
This looks what you need: Maintain aspect ratio of div but fill screen width and height in CSS?
Working example
Add styles to div with background:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
You can resize window to see result.
html, body {
position: relative;
height: 100%;
margin: 0;
}
div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://ghk.h-cdn.co/assets/16/09/980x490/landscape-1457107485-gettyimages-512366437.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div>
</div>
Currently, if my browser is half the monitor's size it will shrink the background to fit the width, cutting off the height and the bottom. I'd like it to instead, keep the height, filling the whole page, and keeping the aspect ratio but just centering the photo and cutting off the sides of the photo, my current CSS is just
body{
background-image: url("/background1.jpg");
background-size: 100%;
background-repeat:no-repeat;
display: compact;
}
Any help on how to do this would be great, thank you
Adding background-size: cover should do the clipping and keeping aspect ratio.
Adding background-position: center; will keep the image in the centre.
(replace rule for div and place it to your body - I used div here for the sample code only)
See running sample below
div {
background-image: url("http://placehold.it/1000/1000");
/* Resizes image to fill div; retains aspect ratio. */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 2000px;
}
<div>
Lorem Ipsum
</div>
background-size: cover;
Should do what you need. Handles cropping / scaling pretty elegantly.
use background-size: auto 100%; in that rule:
body {
background: url("/background1.jpg") center center no-repeat;
background-size: auto 100%;
}
The first parameter (in background-size) is the width, the second the height of the image. If there is only one parameter (as in your rule), the browser will assume it's the width and set the height to auto. My version should give you the full height and adjust the width automatically (and center the image)
I would like to know how I can fill a divs background with an image. No matter what the aspect ratio of the image (landscape or portrait). I tried to use several methods. Over background-size: cover; to background-size: 100% 100%; it doesn't always fill the div. The div has a landscape width/height ratio, the images do have a random ratio. If I try background-size: cover; the landscapes will fill the whole background, but the portrait ones will not (they have gaps on the left and right side).
Edit:
div {
background: url(img.png) no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
}
background-size:cover; should work for your needs. Basically, the cover value will cause the background image to completely fill the div, regardless of the orientation or size of the div, while maintaining the aspect ratio of the image. The one caveat to this solution is that the image will be cropped, since it has to stretch to fill the div.
More info on the background-size property
You could try this
div {
background: url(img.png) no-repeat center center;
background-size: contain; /*i think its better to use contain if you;re using a large png*/
height: 100vh!important;
width: 100hw!important;
overflow:visible;
}
I trying to create a class with a dynamic image background on bootstrap3 without success. Instead use height equal to 180px i trying to use 100% to make it responsive. Whats wrong?
.audio-cover {
background: url("http://media.merchantcircle.com/22662073/180px-Smiley_svg_full.png");
background-size: contain;
background-repeat: no-repeat;
height: 100%; //instead use 180px
}
<div class="col-xs-4 col-sm-4 col-md-4 audio-cover"></div>
set your background-size to cover and specify a min-height.
check out the fiddle
there are a few ways to make an image responsive, but there are questions, do you want to keep the aspect ratio?
if you want to keep your approach of using a div and assigning background properties you can use the following css:
#image {
background-image: url(http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
this will make the div 100% height and width of the parent, but the image background-size is 100% width with auto height. This means, the height will keep its aspect ratio of the original image.
if you want the image to take the full height-width of the parent and not maintain its aspect ratio you can change background-size to:
background-size: 100% 100%;
you can play around with it here http://jsfiddle.net/1f36wedc/
The responsive idea for images is like this:
<div>
<img src="SOME_WHERE" />
</div>
div{
width: X; // depended on your logic
height: 170px;
overflow: hidden; // by this one, maybe you lost some part of image, but is okay
}
div > img{
max-width: 100%;
}
Hope this help
I have image of size 1400x560 and I want the my jumbotron div to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560px
Here is a preview of the html page http://threeguys.us/rts/testing.html.
When i shrink the page , i want the image to resize according to the width of the browser
index.html
<div class="jumbotron">
</div>
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
What you're looking for is background: contain;. Simply add this to your class as follows:
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div (assuming the div is scalable). If you want to constrain your div so it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
See my JSFiddle example.
There isn't a way to get the div to fit the size of its background image, so I suggest you use an img tag instead.
To get your div to fit the size of the image, use display: inline-block on the div:
.jumbotron
{
display: inline-block;
border: solid red 1px;
}
<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
Try:
background-size: 100%;
width:100%
position:relative;
Hope it helps you
Wrap your jumbotron with:
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
Make it simple. Thanks
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="jumbotron"></div>