I stumbled across a solution to a problem I was having with a website layout but wasn't sure if it was standard CSS practice or not. I've tested it on multiple platforms and browsers and it seems to be widely supported.
You can see what I'm talking about on this page.
The website linked to isn't my website but uses the same theme. I'm unable to post a link to my website as I'm working on it in a local environment.
The featured images are inside an element with position: absolute and the images themselves are set to width: 100% and object-fit: cover, and are unpositioned (i.e., static positioning).
The problem was I'm using product images and the object-fit: cover style setting was causing the images to get cut off.
The solution was to simply change the object-fit: cover setting to object-fit: contain which I understand is the default setting. This also centered the image even though the width of the images is less than the containing element.
It is happening because, when you use background-size: cover; it expands the image to cover the width of the div or element. In your case, image is being positioned center center that is why you have some top and bottom portion not visible. The only way I see to make this work is to increase the size of the element respectively with image or else resize the image to fit to the div.
If you want to check how it works. you can do this.
inspect element
change background-size: cover to contain
add css property height: 962px;
However, it is not a good idea.
I would suggest the keep it the way you have it now and adjust the background-position: if you want particular area of the image to be covered. or use the image that fit that div.
Also, the height of the div is being controlled with the content inside so make sure you have control on those content too. Easy way is to set min-height for the parent div with background image.
Let me know if this was helpful.
Related
I am using fixed background images in my ReactJS website. The image I am using in header area is getting weirdly stretched (zoomed-in, only a small part of picture is visible) even though the same CSS properties for different elements work well.
App.js
return (
<div id="main">
<div id="header">
...
</div>
...
<div id="bg-img1" className="background_image">
...
App.css
#header {
background-image: url("img/svatba.jpg");
background-position: center center;
background-size: cover;
background-attachment: fixed;
height: 300px;
background-repeat: no-repeat;
}
...
.background_image {
background-size: cover;
background-position: center;
text-align:center;
min-height: 326px;
background-repeat: no-repeat;
}
#bg-img1 {
background: url('img/svatba2.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
}
...
Now the image in the "header" element shows up zoomed, not covering the viewport as it should. The image in the "bg-img1" element is displayed properly.
What am I missing?
When you set the background-size to "cover", you are telling it to take that image and resize it (or "zoom it in" as you're saying) so that it covers the entire section (here #header).
If your hope is to have a header 300px high that spans the whole width of the page without losing any portions of your image, You would need to serve an image that shares the same proportions as your header.
For example, if your header is 300 x 1000, you could load an image of the same dimensions or of 120 x 400, keeping an aspect ratio of 3:10.
background-attachment
The way that background-attachment: fixed is commonly used is as a way to prevent a background image from moving relative to the viewport whenever the document is scrolled.
Note: For the purposes of this explanation, the viewport can be thought of as being equivalent to the browser window, although this isn't strictly the case.
CSS does this by basically taking the element's background image and attaching it to the viewport instead of to the element itself.
Since the viewport doesn't change its position when the user scrolls, the image will be statically positioned relative to the window. So far, so good.
background-size
Where we get into trouble with attachment is when we try to combine it with background-size: cover (or contain). Because background-attachment has already sent the background image to the viewport, any background position changes made through the CSS become relative to the viewport.
This is normally fine, but it means that when you try to use either a percentage value or a predefined size operator like cover, the background will also be sized to the viewport.
While writing up this summary, I discovered that this behavior is mentioned in the MDN documentation. The only problem is that it's just two sentences jammed in the middle of the percentage paragraph in the Values section of the background-size page. Yikes.
Demo
I've created an interactive demo to show the results of this behavior. To view it, click here.
The demo will display four panels, each with a different combination of sizing and attachment. Move your mouse over each of these panels to see how the background image is positioned in the container, and what's been hidden.
Fun fact: I made over 300 revisions to this demo before I was comfortable calling it done :P
Conclusion
In one of your comments below, you said (emphasis mine):
Cover was the culprit - but I have a little idea why. All the images
are landscape. The elements have min-height. I expected that the cover
will fix the width to the viewport, and that contain would fix the
height to the element height. Instead I see the cover zooming absurdly
(not matching any of the dimensions) and contain matches the width
(which is what I wanted). But why?
CSS often subverts expectations, and this is no different. For the cases below, assume we're using background-repeat: no-repeat.
cover scales the background image so it fits the element's largest dimension exactly and overflows the smaller one. This will generally cause it to be much larger than the element, showing only a portion of the image.
contain sizes the background image so it fits the element's smallest dimension and leaves blank space on either side of the image in the larger dimension.
But when you use background-attachment: fixed...
When you use cover, what you're actually seeing is the image being scaled to match the height of the viewport, since the height is smaller. With a landscape image, the height of the image will be scaled to the height of the viewport, which is why it appears so large.
When you use contain, the image is scaled to match the width of the viewport. If your element takes up the full width of the viewport, this will cover the element, cutting off the image's height, if necessary.
If you want to size the image using element-relative cover or contain, your two options, essentially, are to remove background-attachment: fixed, or to resize the source image so that your background-size declaration isn't necessary. Unfortunately, no CSS solution currently exists to enable attachment and keyword-based sizing at the same time.
I am new to web development and am using Angular with Bootstrap to develop a practice project. I want to have a header component and in my app.component I am calling the header component. Now In the app.component, I want to have a background image which covers around 50% of the screen including the header. I have tried implementing this, but somehow it is appearing to be wrong. There are couple of issues I am facing.
1) When I scroll down, it looks odd and appears as if the bottom portion of page goes on top of the image.
2) The image is not getting shown in full. Here is my image, if you look in my implementation, the entire image is not getting displayed.
Here is the Stack blitz link to My work.
Please view the demo in full screen: Demo Url
If I understand you correctly, the problem with the css (app.component.css) in 2 rules:
background-attachment: fixed;
determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
So I removed it.
Also:
background-size: 100% 100%;
Which stretch the image to full width / height. In your case, I guess you want that it will take only the full width so the way to do this is:
background-size: 100% auto;
The result is:
https://stackblitz.com/edit/angular-rbtcs9?file=src/app/app.component.css
Let me know if it that you are looking for.
I'm getting started with responsive design and just built this very basic "responsive" image sequence http://goo.gl/iMGRkL using the img tag.
Now I'm trying to do the same but using background-image instead of the image tag.
Is it possible without Javascript? I tried a few different approaches, including this http://goo.gl/AstSdl, but no luck so far.
Thanks in advance.
If you are using the css property "background" or "background-image", a good way to do it is to give the particular background image a parent such as a header, div, or section. Then you can use the css values "center" to center it in the parent container, and "cover" to make the image cover the parent div container. You can also play around with pixel and percentage values here. Another thing that is very important is to set the background repeat to "no-repeat" in your css so it doesn't repeat. This code will make it so that the image will cover the parent container at any width or height.
ex: background: #ffa949 url('example.jpg') no-repeat center / cover;
After doing that, the image may still looked a bit scrunched so it would probably still be a good idea to add some media queries.
I'm building a website with a 960px design, but the designer has also requested that the page have a full-width background photo across it. He has supplied a 2000px image for this.
However, trickily, part of the photo is integral to the navigation of the page, so the image needs to be centred. So I want the left and right edges to overflow out of the viewport. I've tried to do this using CSS, but have failed.
I could do a javascript version to adjust the left margin based on the viewport when the document loads and the window is adjusted, but I expect it may perform badly, particularly on the adjustment. A lot of the target audience of the site have some serious legacy hardware, so will be using slow computers running IE6. Is there a good CSS way of doing this which would perform better?
UPDATE: Sorry, I wasn't very clear in terms of the "full-width" thing. The content of the site is all restricted to a 960px column, except this particular image, which should be the full-width of the browser window, even if it is greater than 960px. Using background-position is the method which I've already tried, but if I size the particular div to 2000px wide, then I haven't been able to center the div, whereas if I set it to 100% the background-position:center doesn't seem to work
One way you could do this is with background-position: center top;, put the 2000px image as a background to a 960px div like this:
DEMO
As far as I'm aware this is supported on IE6+
Just use background positioning.
body {
background: url(blah.jpg) center top no-repeat;
}
Try something like this on the image:
position: absolute;
left:50%;
margin-left:-1000px; /* half the width of the image */
However, if part of the image is going to be used for navigation, and it has a fixed 2000px width, i see a lot of tears in your future.
Consider dividing the image into layers that can be manipulated individually.
EDIT: As mentioned by Michael this approach is not good.
I have a really cool website that allows people to upload images. Sometimes there images are really large, as seen in the below div:
![Overflow][1]
Is there a style that can I add to my DIVs to fix this?
Link
Set your CSS overflow property on the div to one of these:
overflow: auto; /* Adds scrollbars only when necessary */
overflow: scroll; /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden; /* Hides any content that overflows */
You can use the CSS overflow property: set it to hidden or auto to either hide content or add scrollbars if necessary.
Generally speaking, with large images you want to thumbnail them and not automatically display them, particularly if they're over a certain size.
Using the height and width CSS attributes (or the height and width attributes) will scale the image but it'll still download the whole thing. If its large that could be a problem. It's best to generate a thumbnail on upload, display that and then allow the user to click on that to display the full-size image.
<style>img { max-width: 100% }</style>
This will make the browser resize images to fit inside their containing box. There's a few drawbacks, one being that it obviously won't work in IE6 (maybe 7?), and if the containing element has padding you'll need a wrapper around the image to make it fit.
Another great one although not fully supported would be adding max-width: 400px to your image.
Instead of using CSS, you should do a basic width & height check on your server side, and if it goes beyond a certain threshold use HTML/Javascript to resize the image. Many website forum applications do this and often allow you to click to expand the image.
Then make sure you use the Z-LAYER property to make sure the image floats above content blocks so when the image expands it's above everything.
Automatically resize each of the uploaded images, using a toolkit like ImageMagick. You'd also end up with better looking images, because it'll resample (rather than just resize).
You can then create good looking thumbnails, previews and other sizes of each images that'll fit nicely into your template designs.
If you don't want to go all the way to resizing the actual image file, and want to maintain the proportions of the image, then you can interrogate the image for its sizes (height and width) then multiply them by a required factor to fit into your div.
For example, if you have a 1024x768 image and want to put it in a div that is 800 wide, you know the width will be 800, and the height will be 768 x (800/1024) = 600. Then when displaying your image you can set the height and width properties as required.
or, with some little piece of javascript, you can check for an image width. if is larger than Xpx, then you scale to Ypx. Ofcourse, you will have a little "image flick" until the page is completly loaded.
You can inspire yourself from any IPB forum :)