For example, if I have a background image of a cyclone and it's responsive/resizes with the window and covers the whole web page (background-size: cover), but the eye of the cyclone isn't in the center of the webpage but say slightly more to the right and I wanted another image, say a picture of an apple, to always cover the eye of the cyclone, no matter what size the window is, what could I do?
I've tried playing around with the margin percentages, the image of the apple is also responsive and shrinks with the background image to cover the eye of the cyclone but the images always tend to move out of sync just before I've dragged the window to it's smallest size.
The CSS background size property can have value of cover. The cover value tells the browser to automatically and proportionally scale the background images width and height so that they are always equal to or greater than the viewports
width/height.
In Img tag use height i and width in pixel then change in CSS
then output will show properly
Check the Multiple Backgrounds CSS feature which will achieve your request: https://www.w3schools.com/Css/css3_backgrounds.asp
I have the following:
<div style="container;background-image:url('/images/football.jpg');background-size:100% 100%;">
I would like to manually adjust the width and height of the image. I currently have it covering the full width of the div, but not the full height. Is there a way to manually adjust the size in percentage form while maintaining no-repeat of image.
As mentioned
"background-size:"
Is what you are after however I thought I'd just add a little bit of helpful advice and point you towards W3schools.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
I only recently got through web development at Uni and W3schools was the single most useful source of information I had access to (don't tell my lecturer that). If you get in the habit of looking there first it'll help you out a bunch.
Also might be worth learning how to use external style sheets and linking them into your HTML.
Hope this helps !
background-size: 100%;
will adjust the image proportionally to 100% width of the background area.
If your image size is less then background area then use
background-size:cover;
to stretch it so that the background area is completely covered by the background image.
If your image size is greator then background area then use
background-size:contain;
to shrink it so that the background image is completely fit in the background area.
Visually I can appreciate the difference, but in which situations should I prefer one over the other?
Is there any point using them at all or can they be replaced by percentages?
Currently I don't seem to be able to go beyond a trial-error approach when using these properties, which does my head in.
Also I can only find pretty vague explanations and especially I find the W3C doc quite baffling.
Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any), to the
smallest size such that both its width and its height can completely
cover the background positioning area.
I'm probably being a bit thick, but can anyone give me a plain English explanation with relative examples?
Please use this fiddle. Thanks.
CSS
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-size:contain;
background-repeat:no-repeat;
}
Note
The accepted answer is the one I currently find the most concise and complete.
Thanks everybody for their help.
You can consider looking at the pseudocodes that govern the output. The values allotted to the image's size depend directly on the aspect ratios of container wrt aspect ratio of the background image.
Note: Aspect ratio = width / height
Contain
if (aspect ratio of container > aspect ratio of image)
image-height = container-height
image-width = aspect-ratio-preserved width
else
image-width = container width
image-height = aspect-ratio-preserved height
Cover
if (aspect ratio of container > aspect ratio of image)
image-width = container width
image-height = aspect-ratio-preserved height
else
image-height = container height
image-width = aspect-ratio-preserved width
You see the relation? In both cover and contain, aspect ratio is preserved. But the if - else conditions reverse in both the cases.
This is what makes cover to cover full page, without any white portion visible. When aspect ratio of container is greater, scaling image so that its width becomes equal to container width. Now, height will be greater, as aspect ratio is smaller. Thus it covers the whole page without any white portion.
Q. Can they be replaced by percentages?
No, not simply by percentages. You'll need conditioning.
Q. In which situations should I prefer one over the other?
When you are creating a website, you wouldn't want any white portion in the fixed background. So use cover.
contain on the other can be used when you are using a repeating background (e.g. when you have a pattern image with very high aspect ratio wrt veiwport/container you can use contain and set background-repeat to repeat-y). But a more appropriate use for contain would be for a fixed height/width element.
Although the question assumes the reader already understands how the contain and cover values for background-size work, here's a plain-English paraphrasing of what the spec says, which can serve as a quick primer:
background-size: contain ensures that the entire background image will fit the background area, keeping its original aspect ratio. If the background area is smaller than the image, the image will shrink so that it can fit the background area. If the background area is either taller or wider than the image, then any parts of the area not occupied by the main image will either be filled by repetitions of the image, or letterboxes/whitespace if background-repeat is set to no-repeat.
background-size: cover makes the background image as large as possible such that it will fill the entire background area leaving no gaps. The difference between cover and 100% 100% is that the aspect ratio of the image is preserved, so no unnatural stretching of the image occurs.
Note that neither of these two keyword values can be expressed using any combination of lengths, percentages, or auto keywords.
So when do you use one over the other? Personally, I think cover has more practical uses than contain, so I will go with that first.1
background-size: cover
One common use case of background-size: cover is in a full-screen layout where the background image is rich in detail, such as a photo, and you want to feature this image prominently, albeit as a background as opposed to the main content.
You want just enough of the image to be able to completely cover the browser viewport or screen, regardless of the aspect ratio of the viewport, or whether the image or the viewport is in portrait or landscape. You're not concerned if any parts of the image are cropped out as a result of this, as long as the image fills up the entire background area and maintains its original aspect ratio.
Here's an example of a layout where the content is housed in a semitransparent white background, which hovers over a full-screen background. When you increase the height of the preview pane, notice that the image automatically scales up to ensure that it still covers the entire preview area.
html {
height: 100%;
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
body {
width: 80%;
min-height: 100%;
background-color: rgba(255, 255, 255, 0.5);
margin: 5em auto;
padding: 1em;
}
If you use background-size: contain instead, what happens is that the background image shrinks in order for the entire image to fit in the preview pane. This leaves ugly white letterboxes around the image depending on the aspect ratio of the preview pane, which ruins the effect.
background-size: contain
So why would one use background-size: contain if it leaves ugly blank spaces around the image? One use case that immediately comes to mind is if the designer doesn't care about the blank spaces, so long as the entire image fits within the background area.
That may sound contrived, but consider that not every image looks bad with empty space around it. This is where the example of using a logo instead of a photo actually demonstrates this best, even though you probably won't find yourself using a logo as a background image.
A logo is typically an irregular shape sitting on either a blank or completely transparent background. This leaves a canvas that can be filled by a solid color or a different background. Using background-size: contain will ensure that the entire image fits the background without any parts of it being cropped out, but the image still looks right at home on the canvas.
But it doesn't necessarily have to apply to an irregularly-shaped image. It can apply to rectangular images as well. As long as you require that no cropping of the background image occurs, whitespace can either be seen as a reasonable tradeoff, or not a big deal at all. Remember fixed-width layouts? Think of background-size: contain as essentially that, but for background images and in both portrait and landscape orientations: if you can ensure that the content will always fit the boundaries of the background image at all times, then whitespace becomes a non-issue altogether.
Although background-size: contain will work whether or not the image is set to repeat, I can't think of any good use cases involving repeating backgrounds.
1 Note that if you're using a gradient as a background, both contain and cover have no effect because gradients do not have any intrinsic dimensions. In both cases, the gradient will stretch to cover the container, as though you had specified 100% 100%.
background-size:cover will cover the entire div with the image. This could be useful for showing thumbnail images of a main image where the entire image being displayed isn't that important, but you still want to conform to a size for all images. (for example, a blog post excerpt)
background-size:contain will show the entire image within the div. This can be useful if you specifically want to display the entirety of the images, but within a set container div size. (For example, a collection of company logos)
Both keep the image at the same aspect ratio
http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg
background-size:contain;
When using contain you may still see white-spacing, due to the way that it sizes and contains itself within the element.
background-size:cover;
will completely cover said element, you will not see any white-spacing
source:
http://www.css3.info/preview/background-size/
see example H
edit: use background-size:contain if:
You want it so that your image is always displayed in the viewport. Please note that: while you can see the full image, it will leave white spacing either on the top or bottom of the image whenever the aspect ratio of the browser and window are not the same.
use background-size:cover if:
You want a background-image, but you don't want the negative effect of the white-spacing which contain does have, please note that: when using background-size:cover; you may experience that it will cut off some of the image.
source: http://alistapart.com/article/supersize-that-background-please
Contain:- Scale the image to the largest size such that both its width and its height can fit inside the content area.
Exmaple:
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.
Example:
We had a huge conversation about cover vs contain just want to share this thoughts:
landscape image on landscape screen - best to use cover
portrait image on landscape screen - best to use contain
portrait image on landscape screen - best to use contain
portrait image on landscape screen - best to use contain
Illustration:
if(iDonPutSomeCode) const result = iCantPasteLinkToCodePen
https://codepen.io/Kinosura/pen/EGZbdy?editors=1100
I've never dealt with a website like this before, but here's what I'm trying to accomplish...
I have one large image (1000px x 1000px) which I want to use for the background image. The content itself only takes up around 500px x 500px, and It needs to be on the same position all the time relative to the background image.
This is complicated to describe, so I'll make a picture:
This itself doesn't seem like it would be that hard, but what if the browser is larger than my 11" screen? If the browser is too big for the background image, I'd like a simple color to show.
The other problem I see is keeping it centered at all time with scroll bars not appearing as they should only appear if the browser window is smaller than the content box.
I'll be happy to clarify more, as I'm having trouble putting into words what I'm trying to accomplish.
use CSS:
HTML{ width:100%; height:100%;
background:#F00 url(path/to/your/image.jpg) center center no-repeat;
background-attachment: fixed;
background-size:100% auto;
}
background sums up background-color, background-image, background-position and background-repeat (in that order). The other two currently cannot be included in background (though the W3C spec says otherwise).
background-attachment:fixed is like position:fixed for layers and will assure that the image stays visible regardless of how the user scrolls. if you don't want that, wrap a container around your content and assign the above declaration to it instead of to the HTML-node
background-size scales the image into your background
play with the value a bit - what I proposed here will scale the image to fit to the width of the viewport. 100% 100% will stretch it to always cover the entire viewport and auto 100% will scale it to fit into the height of the viewport. In both cases that use auto some clipping might occur - or the background-color (I chose red) will show on the sides/top&bottom
giving the HTML-node width:100%;height:100% makes sure you don't have a white border on the bottom if your content does not fill the screen
Not clear what problems you are having. Here is an example of what you might want to do: http://jsfiddle.net/mhgdZ/
I'm trying to make a page that can scale down to support small browsers, but take advantage of the majority of browser sizes that most visitors are using.
I have a background image that is bigger than 1024x728, but the most important parts of the image are contained within 1024x728... It's like a magazine's bleed - there's extra image there if its needed (and it looks better if fully expanded) but it's not necessary.
I have included an example to illustrate what I mean:
http://tinypic.com/r/24l5she/7
The "background image" is the entire red box in the larger browser window, and there's a repeating texture it sits within (the blue). The "white box with red arrows" is the "minimum size" I want to accept. What I am trying to do, depending on the size of the user's browser, is cut out parts of the image until the browser reaches some specific minimum size.
Can this be done within a framework like 960.gs?
Really looking forward to your responses!
Cheers,
Put your page in a fixed-width wrapper div, then add a centered background-image to the body tag.
With CSS3's background-size property, you can force the image to stay a constant size. Then it's just a matter of a no-repeat center center bit in your background declaration.
div {
background: url('yourpic.jpg') no-repeat center center;
background-size: 1024px 768px
}
You didn't really want to support IE<=8, did you?
Not an answer but more of a food for thought...
Seeing as your background image is so large, you may want to just remove it from mobile devices. While most of them can handle it, it's just extra data that needs to be transferred and most mobile carriers have strict data limits.
Like I said, just something to consider. :)