I have been working on positioning a background image, but the image is only positioned correctly while the webpage window is adjusted to its minimum width. As I resize the browser window the image is clipped on all of its' side lengths. The photo has a height much greater than its width(1391 x 2471). I thought I might have to incorporate a vertical scroll? The website is being designed for mobile platforms but I will be viewing and designing it primarily on a computer monitor. How might I maintain the images' integrity from Min. Width of browser to Max. Width of browser?
* { margin: 0;
padding: 0;
}
html {
background: url("image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
My CSS code for the positioning of the image was taught to me on CSS-Tricks though it has provided the best results so far. I have added a link to the image encase you would like to view. It is a photo I took myself so I hope the link provided is functional.
You need to get the html element (or whatever element you want the img to show in) to have at least the full height of the img when the img has full width (100vw) of the viewport.
You can do that if you know the aspect ratio of the image. In this case you know the natural width and height of the original so the aspect ratio can be calculated by CSS if you give it those dimensions as variables.
Here's an example using your CSS settings (except see caveat below):
* {
margin: 0;
padding: 0;
}
html {
--imgw: 1391;
--imgh: 2471;
width: 100vw;
min-height: calc(100vw * var(--imgh) / var(--imgw));
/* make sure the whole height of the image is always shown */
background-image: url(https://picsum.photos/id/1015/1391/2471);
background-size: cover;
}
HELLO
Caveat: you have background fixed in your CSS. Two problems with that: it renders the element unscrollable and in any case it is not properly supported in Safari and makes the background look 'fuzzy' on IOS. So this snippet has removed it.
body{
background: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If I have understood this properly, you want the image to be displayed properly on all the sizes you want?
Well in that case you can use #media query.
#media(max-width: your max width in px) {
/*And here change the height and width so that it doesn't look weird*/
}
Afternoon Stack overflow,
My issue is with my website here
I'm using a module for the background image which works perfectly well on desktop computers and ipads, When a mobile user looks over the website, The background image which is maxed at 4000px stops and displays a white background instead. I've tied #media fixes but have had no luck. The only fix i found overlayed the content area remove the dripping effect at the top.
Device comparison
Thanks again, Steven
Solution:
1- Give background:#000; to the body in mobile situation(media query)
body {
background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
}
2-Give background-size: cover !important; to the body in mobile situation(media query)
body {
background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
background-size: cover !important;
}
You could just give
#content { background-color:#000; padding-bottom:30px; }
and remove
footer { margin-top:30px; }
Gives the same visual effect as if the image had covered it all.
Your background is just not responsive that is the issue here.I suggest trying to fix your backgound image
background: url(http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Try putting this on your site
As you can see it picks up the image and its responsive and everything in the background is responsive.
Just play around with your background image make it smaller since its cutting in half ways from top to bottom
EDIT:
Your image is 1920x4252 ,make it 1920x1080 or something similar.
I have created a webdesign with used body:before tag to 'split' the design, similar to the TwentyFifteen theme of WordPress (https://wordpress.org/themes/twentyfifteen/)
But I don't use a color for the "left" column, but an image. The Code works in all browsers fine (Chrome, FF, Safari) but not in IE (Version 9-11).
The CSS looks like:
body::before {
background: url("img/back-left.jpg") no-repeat center top ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
content: "";
display: block;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
width: 30%;
z-index: 1;
}
The effect: the background picture was not showing, when open the page with IE. When I go to a sub-site, the picture was showing. When I transform the browser windows, the picture was showing. When I change ANYTHING (no matter what) in IE Dev toolbar, the picture was showing.
If I use background-color instead of background (or background-image), it works fine on IE.
Any ideas? I think it sounds like a rendering thing. The background image was rendered too late and so was not showing (instead I interact everthing on the page). But how to fix it?
I found a 'solution', that run into an other problem. ;-)
When I set
html, body { overflow: auto; }
Then, the background-image was displayed proper in IE 10 and IE 11. But now I have the IE 11 smooth scrolling problem (The background image jump all over the place when using the mouse wheel. When using the scrollbar, it works fine).
Anyway, this variant is better for me, than not displaying the background-image. So I still hoping, that MS correct the smooth-scrolling bug.
I made a fork in CodePen with this correction: http://codepen.io/anon/pen/rabMMm
(this was the originally CodePen code: http://codepen.io/anon/pen/qEwEVy)
Or did any knows a solution to fix the smooth scrolling prolem from IE?
I have a mobile web application based on jQM. I have a background image with the following styles applied to it:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: cover;
}
The thing is, this works fine on iOS, Chrome for Android but on ICS native browser and Dolphin browser, the background sticks to the top of the page like this after scrolling starts:
After some action, (like tapping on an element, the background comes back to focus like this:
I checked on the internet, did extensive research but obviously Im missing something. These are the links of the solutions I've tried:
SO link 1
SO link 2
What you see on top (I mean the CSS) is the default un-edited style applied.
Note:
Ive tried supersized plugin as well, and it works for GingerBread devices and when the content in the page is static.
On ICS devices, I'm not able to scroll beyond the viewport if its applied to a page with dynamic content.
The same problem happens when I try to create an img tag in the body of the page with src set to the path where the image is located.
THESE PROBLEMS OCCUR ONLY ICS NATIVE BROWSER.
Please tell me if I'm doing something wrong. Is there a pure CSS solution for this? (Obviously something is hugely wrong)
Try this:
body.ui-mobile-viewport .ui-page
{
background: url('images/bg-texture.jpg') no-repeat fixed left bottom;
background-size: cover;
}
The following CSS for "html" solves my issues with full page background images on Android devices:
html{
height:100%;
width:100%
}
body{
background-image:url(img/background.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
Hope that helps.
Is there a way to get a background in CSS to stretch or scale to fill its container?
Use the CSS 3 property background-size:
#my_container {
background-size: 100% auto; /* width and height, can be %, px or whatever. */
}
This is available for modern browsers, since 2012.
For modern browsers, you can accomplish this by using background-size:
body {
background-image: url(bg.jpg);
background-size: cover;
}
cover means stretching the image either vertically or horizontally so it never tiles/repeats.
That would work for Safari 3 (or later), Chrome, Opera 10+, Firefox 3.6+, and Internet Explorer 9 (or later).
For it to work with lower verions of Internet Explorer, try these CSS:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Scaling an image with CSS is not quite possible, but a similar effect can be achieved in the following manner, though.
Use this markup:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
with the following CSS:
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
and you should be done!
In order to scale the image to be "full bleed" and maintain the aspect ratio, you can do this instead:
.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }
It works out quite nicely! If one dimension is cropped, however, it will be cropped on only one side of the image, rather than being evenly cropped on both sides (and centered). I've tested it in Firefox, Webkit, and Internet Explorer 8.
Use the background-size attribute in CSS3:
.class {
background-image: url(bg.gif);
background-size: 100%;
}
EDIT: Modernizr supports detection of background-size support. You can use a JavaScript workaround written to work however you need it and load it dynamically when there is no support. This will keep the code maintainable without resorting to intrusive CSS hacks for certain browsers.
Personally I use a script to deal with it using jQuery, its an adaption of imgsizer. As most designs I do now use width %'s for fluid layouts across devices there is a slight adaptation to one of the loops (accounting for sizes that aren't always 100%):
for (var i = 0; i < images.length; i++) {
var image = images[i],
width = String(image.currentStyle.width);
if (width.indexOf('%') == -1) {
continue;
}
image.origWidth = image.offsetWidth;
image.origHeight = image.offsetHeight;
imgCache.push(image);
c.ieAlpha(image);
image.style.width = width;
}
EDIT:
You may also be interested in jQuery CSS3 Finaliz[s]e.
Try the article background-size. If you use all of the following, it will work in most browsers except Internet Explorer.
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
.style1 {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Works in:
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
In addition you can try this for an ie solution
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;
Credit to this article by Chris Coyier
http://css-tricks.com/perfect-full-page-background-image/
Not currently. It will be available in CSS 3, but it will take some time until it's implemented in most browsers.
In one word: no. The only way to stretch an image is with the <img> tag. You'll have to be creative.
This used to be true in 2008, when the answer was written. Today modern browsers support background-size which solves this problem. Beware that IE8 doesn't support it.
Define "stretch and scale"...
If you've got a bitmap format, it's generally not great (graphically speaking) to stretch it and pull it about. You can use repeatable patterns to give the illusion of the same effect. For instance if you have a gradient that gets lighter towards the bottom of the page, then you would use a graphic that's a single pixel wide and the same height as your container (or preferably larger to account for scaling) and then tile it across the page. Likewise, if the gradient ran across the page, it would be one pixel high and wider than your container and repeated down the page.
Normally to give the illusion of it stretching to fill the container when the container grows or shrinks, you make the image larger than the container. Any overlap would not be displayed outside the bounds of the container.
If you want an effect that relies on something like a box with curved edges, then you would stick the left side of your box to the left side of your container with enough overlap that (within reason) no matter how large the container, it never runs out of background and then you layer an image of the right side of the box with curved edges and position it on the right of the container. Thus as the container shrinks or grows, the curved box effect appears to shrink or grow with it - it doesn't in fact, but it gives the illusion that is what's happening.
As for really making the image shrink and grow with the container, you would need to use some layering tricks to make the image appear to function as a background and some javascript to resize it with the container. There's no current way of doing this with CSS...
If you're using vector graphics, you're way outside my realm of expertise I'm afraid.
This is what I've made of it. In the stretch class, I simply changed the height to auto. This way your background picture has always got the same size as the width of the screen and the height will allways have the right size.
#background {
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
Add a background-attachment line:
#background {
background-attachment:fixed;
width: 100%;
height: 100%;
position: absolute;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:auto;
}
I would like to point out that this is equivalent to doing:
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}
Another great solution for this is Srobbin's Backstretch which can be applied to the body or any element on the page - http://srobbin.com/jquery-plugins/backstretch/
Try this
http://jsfiddle.net/5LZ55/4/
body
{
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
An additional tip for SolidSmile's cheat is to scale (the proportionate re-sizing) by setting a width and using auto for height.
Ex:
#background {
width: 500px;
height: auto;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
Use the border-image : yourimage property to set your image and scale it upto the entire border of your screen or window .