I'm building a thumbnail gallery. For each thumbnail, I am creating a clipper div and placing image inside that div. Thumbnail sizes are different for different images where as clipper div is 150x150px
<div class='clipper-div'>
<img class='image1' src='img/img2.jpg'/>
</div>
I want to place that image so that it occupies that div completely and rest of the image is clipped such that it is exactly centered.
In order to do this, I am seeing what is the smallest dimension of the image ( height/width ), making it 100%. And then for other dimension, which is now greater than div's 150px. I'm calculating difference, dividing it by 2 and setting top/left attribute to negative of that value so the image looks centered, and then adding overflow:hidden to clipper div so the excess portion is invisible.
I want to know if there is a better way of doing this, instead of me calculating these values can I just set CSS properties so that all images will be centered in that div (vertically/horizontally) and remaining part is clipped.
If my description is confusing, here is an example:
Let's say thumbnail size is 300x100px. So height is the smallest attribute, so I'm setting it to 100%. So height becomes 150 and width becomes 400px, so now I calculate the offset. In this case (400-150)/2 = 125px. Now I set image left to -125px
.image1{
position:absolute;
left:-125px;
height:100%;
}
Try this:
.Image1 {
background: url(images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Related
all.
I am trying to set an image as the background inside a div container which will always have the dimensions of the screen of the device. For this purpose, I am providing the css as follows
.outer {
height: 100vh;
background-image: url(demo_top.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
<body>
<div class='outer'>
</div>
</body>
The positive of this code:
-Image quality is maintained.
The negatives of this code:
-Background image is not responsive as the focus is only on centre
-The top and the bottom part of the images are cropped because the position is used as the centre.
What I am looking for is my div to display the entire image without any cropping or image stretching or distortion.
The image size I am using is 2000x2000
If you want the image to have the same dimensions as your container, you have to use the same image proportions. In this case, the container must also be square (1x1). If the proportions of both elements are not equal, the only solution is to stretch one side of the image or to cut it.
https://developer.mozilla.org/es/docs/Web/CSS/object-fit
Instead of background-size: cover, you need to use contain. This will allow the image to be as large as possible without cropping outside the div and with no stretching/distoring.
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-size:contain;
I have a large background cover.
<div id="cover">
...
</div>
And the CSS
#cover {
background:url('cover.jpg') no-repeat fixed center center / cover;
height: 350px;
width: 100%;
}
The expected output : The background image, resized to 350px x 100% (in my case 350x900), should have a scroll effect based on the <div id="cover"></div>.
The actual output : The background image, resized to viewport (in my case 1440x900), has a scroll effect based on <html></html>.
What I want is for background-attachement:fixed to be relative to the div not the viewport.
Background images are by default "fixed" to the element they are attached to. When you set a background CSS property to fixed, it does the same it would do for a DOM element, it makes it fixed regarding the whole document (viewport).
Changing the fixed property to scroll should do the trick here:
background:url('cover.jpg') no-repeat scroll center center / cover;
i have this jsfiddle: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. It seems to work fine, the only issue
is that the image will be cut of a little bit at the top and at the bottom for some reason.
-webkit-background-size: cover;
Why ?
Appreciate all your help
The background image is being cut off due to CSS styling in relation to the dimensions of the JSFiddle Result viewport.
The CSS property 'background-size: cover' is constraining and scaling the image's overall proportional size based on the width of the JSFiddle viewport.
In your background property for the body style, 'center center fixed' is centering the center point of your image in a fixed position to the center of the viewport. If the scaled image (constrained by the width of the viewport) is taller than the viewport itself, the image is merely going beyond the upper and lower bounds of the JSFiddle Result viewport, and appearing clipped.
To illustrate, try removing 'center center fixed' from your background property on the body style, like this:
body {
background: url("http://f.cl.ly/items/260T100F3j2Y3L1S0g1w/bg.jpg") no-repeat #292929;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The image will now position itself to the top of the viewport, and will no longer be clipped along the upper edge. Then, narrow the Result viewport, and the image will no longer be clipped along the bottom once it has sufficiently diminished in size.
I suspect that you are trying to scale your image to the available dimensions of the viewport, both horizontally and vertically. However, at any given time, you have a viewport of a random size, as well as an image that is of a certain aspect ratio. If you do not want to forcibly squash the image vertically or horizontally in order to achieve a total image fill, you must allow the image to scale in relationship to the width of the viewport (and potentially be clipped along the bottom edge), as suggested in this SO Answer.
If the content of the image cannot be clipped and must be viewable, instead of using CSS to place your image, use an 'img' element and scale that with CSS. The viewport will then be scrollable if the image content does go beyond the viewport's available dimensions.
I've created a codepen example of this latter approach for you.
From [W3Schools]
Cover: Scale the background image to be as large as possible so that
the background area is completely covered by the background image.
Some parts of the background image may not be in view within the
background positioning area
So basically it is behaving normally, when the body gets wider, the top and bottom of the background image will be cut off.
You could use contain instead and add a white background to keep the entire image at all times.
-webkit-background-size: cover;
background-color:white;
The background-size property let you expand and shrink according to size your div. Its responsive for more reference check out this LINK
I'm trying to create a responsive site using Bootstrap that has multiple full-width background images.
Here's a mockup of how it should look:
The idea is for each image to stretch to the width of the browser window, and then the height to be scaled accordingly to preserve the aspect ratio.
I've put up a JSFiddle of what I've got right now:
http://jsfiddle.net/SeFVV/
Currently, I've got multiple <section> tag, and I'm setting a background image with background-size: cover on each:
#first {
background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 800px;
/*height: 800px;*/
/*padding-bottom: 200px;*/
}
As a hack, I'm setting min-width for each so it's not really responsive.
If I don't set min-height, then each simply shrinks to fit the elements inside, which is not what I want.
In a previous question, the answer suggested using multiple Bootstrap containers - are you meant to have multiple container divs normally? Also, that answer didn't really cover how to make it responsive, so that the width would fit, and the heigh would scale to preserve aspect ratio.
You can use dynamic height of window by adding to your html and body tag height of 100%, and the section tags of the page(where you want to streach the background images).
Example:
html,body,section{height:100%;}
Live Example
I'm using a full sized background via:
background: url(/static/img/background/my_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Q1. When my page expands to show extra content, the bg jumps to get larger, is there a way to stop this?
Q2. What would be a good work around or fallback for cover bg's for IE7-8?
Thanks
Correct me if I am wrong, but I am assuming that you are trying to keep your background image from expanding/moving vertically, right? If that is the case, then maybe this CSS will do what you want it to:
background-image: url('/static/img/background/my_bg.jpg');
background-size: auto 1080px;
background-position: center top;
background-repeat: no-repeat;
The background vertical size is set to 1080px but you can set that to whatever you want just so it is a static value ( The auto* value for width will simply preserve your image aspect ratio ). That should keep the picture from scaling. Using Center Top for positioning instead of Center Center should keep your picture anchored at the top middle so it wont shift downward if the page is expanded vertically.
If you want the image to scale down but only scale up to a certain point I think you will need to use a Div Tag to encompass your whole page and set the image as a background of the Div. From there you should be able to set your image to scale and also set max-width and max-height.
If this doesn't help, more information about the effect you are trying to achieve would be appreciated. :)