https://jsfiddle.net/2esv5wja/
css code snippet:
.imageContainer {
height: 750px;
width: 100%;
overflow: hidden !important;
}
.imageContent{
background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
background-size: 100%;
width: auto;
height: 100%;
padding-top: 3%;
padding-bottom: 3%;
min-width: 1200px;
overflow: hidden !important;
}
Is there a way to make it so when the image stops scaling, it crops to the center? That is, as it stands, it crops from the right. Can we crop from both sides evenly? If so, how is that done?
Please see the updated jsfiddle > here
You need to scale by height in order to get the crop effect you are looking for in order to do this, please see the code:
.imageContent{
background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
background-size: auto 100%;
height: 500px;
padding-top: 3%;
padding-bottom: 3%;
}
The background size property handles the scaling which is why I have changed it to be so that the width is always auto and the height is 100%, I have then added a hard height in pixels which you can change. This creates the desired effect.
Easy answer is to set the
background-size: 50%;
Looks ok on your fiddle.
replace background-size: 100%; with background-size: cover;
https://jsfiddle.net/2esv5wja/4/
Try this:
background-size: 100% 100%;
Related
I have been searching for a while, I still cannot find the exact answer.
I have a <div> for which the width takes 100% of the screen, the height is fixed at 600px.
I would like to add a background picture to the div for which the picture height would fit the <div> height (600px and no picture crop). Whenever I modify the width of the screen, the height should always remain 600px. The picture would then be centered and cropped on the width direction.
Try this:
.container {
width: 100%;
height: 600px;
background: url('https://images.pexels.com/photos/268415/pexels-photo-268415.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
}
<div class="container"></div>
Did you tried
`
background-image: url('your-image.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
`
I think this what you are looking for :
body {
margin: 0px;
padding: 0px;
}
div {
width: 100vw;
height: 600px;
background: url('https://wallpaperbrowse.com/media/images/704532.jpg') no-repeat;
background-size: 100% 600px;
float: left;
background-position: center;
}
<div>
test
</div>
Hope this was helpful for you.
I am trying to fit image into div. But somehow image is not fitting. Take a look at div called as node2
I have put below properties to image
img {
max-width: 100%;
max-height: 100%;
}
Here is my Fiddle
Instead of using max height and width, try using regular:
img {
width: 100%;
height: 100%;
}
I also noticed in your fiddle, under CSS you had the following:
object-fit: contain;
You need to remove this as well.
Both of which will stretch the image both vertically and horizontally across the whole of the div.
I think you need this:
img {
float: left;
object-fit: fill;
width: 100%;
}
and if you do not want to strecth your image then please add following css also:
#node2 {
height: auto;
width: 255px;
}
Please find fiddle demo here.
if you want it 100% x 100% then, do it as background image of your div:
div{
background-image: url('../images/yourimage.jpg');
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
}
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.
my header background image changes size when I change the width of my browser, to the point that if the width gets small enough, my image will get pushed out. I have background-size: 120%; and I know that's what's causing it. Would there be a way to set the minimal size of the background image via percentage? If not, how could I fix this?
You can vist my website at erraticfox.tumblr.com if needed a example of the problem.
Oh and here's my headers CSS code:
#header {
margin: auto;
display: table;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px;
background-size: 110%;
}
Here's a jsfiddle, you might want to resize the width of the result window and you'll see my problem: http://jsfiddle.net/2AbKb/
Its not resizing here. I have removed 'display-table' as i dont think it was necessary.
HTML
<div id="hed">
</div>
CSS
#hed{
margin: auto;
height: 300px;
width: 100%;
min-height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 0px -650px
background-size: 110%;
background-color:black;
}
I'd suggest something like this:
#header {
margin: auto;
display: table;
height: 300px;
min-width: 800px;
background: url('https://dm2013.s3.amazonaws.com/assets/img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Lose background-attachment:fixed; Is that the effect you're after?
I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
Currently, I have: http://jsfiddle.net/ndKWN/
CSS
#main-container {
float: left;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.chapter {
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1 {
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
#chapter2 {
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height: 1200px;
}
See my answer to a similar question here.
It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:
.chapter {
position: relative;
height: 1200px;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/3/
The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.
If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's height to 0 and set the padding-bottom to the percentage of the width:
.chapter {
position: relative;
height: 0;
padding-bottom: 75%;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/4/
You could also put the padding-bottom percentage into each #chapter style if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.
http://jsfiddle.net/ndKWN/1/
You can use background-size: cover;
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.