I am using a different background image for each page on my site using the HTML below:
<div class="bg_img">
<img src="images/bg1.jpg" alt="background" />
</div>
When using the site in IE and Firefox there is no problem but when using in Chrome there is a choppy / lag effect when scrolling.
I realised that when I remove the width:100% property the lag stops but I need it to scale the background images.
.bg_img img{
width:100%; <---- PROBLEM
position:fixed;
top:0px;
left:0px;
z-index:-1;
}
Is there something I could do to get around using width:100%?
I would totally change the approach to a full page background. There are better solutions than just setting a 100% which will ultimately cause a wrong image ratio.
Here's a way you could try.
.bg_img img{
background: url(bg_img.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can read more about full page backgrounds here.
These days, with all modern browsers supporting it, I would suggest using a background image instead, and using something like this:
background-size: cover;
That will keep the background image on the <body> element as wide as the screen. (For older, dodo browsers, you can just center it.)
There are options other than cover, but I suspect that's what will work best for you.
Related
I have tried for two days now to make the background img responsive for a mobile. It's a one long home page (around 8000px). The content of the whole page has a div parent "background_div". I have tried both, size cover or contain tags, the img gets over pixaleted, like it would be zoomed in, the content is responsive but the background img gives me a headache. I need it to recognize the device width, scale down and stay fixed not stretched along the 8000px long page. Can any one give me an idea whats wrong here?
#background_div {
background-image: url('home.jpg');
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}
/*It just won't scale to the divice width and height*/
<div id="background_div">
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Setting these to cover is going to stretch the image to fit the container, no matter how big it is. That is what's causing your stretching.
Set them to auto, or don't set them at all, if you want the image to retain it's original size.
CSS2
If you need to make the image bigger, you must edit the image itself in an image editor.
If you use the img tag, you can change the size, but that would not give you the desired result if you need the image to be background for some other content (and it will not repeat itself like you seems to want)...
CSS3 unleash the powers
This is possible to do in CSS3 with background-size.
All modern browsers support this, so unless you need to support old browsers, this is the way to do it.
Supported browsers:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) and Chrome 3.0+.
#background_div {
/* width: will stretch to width / height of element */
background-size: 100% 100%;
}
My site's background image is resizing nicely in Chrome and Safari using background-size: cover, but when I go to test my website on an ipad or iphone, the CSS background image is really zoomed in and looks horrible. I've read lots of other questions on here relating to this and none have solved my problem.
HTML
<div class="background">
</div><!--background-->
.background has no container and is 100% width of the screen.
CSS
.background {
height:600px;
width:100%;
position:relative;
background: url(css/img/strand.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I had the same issue, I used SCROLL instead of FIXED.
background-attachment:scroll;
Apparently, the iPad's Safari is downsampling images above the 1024px threshold. I had tried using scroll instead of fixed but that wasn't successful. Other tricks didn't work for me either.
I solved this by splitting my originally-too-large 1600×1600 image into two images. Because of that, I was able to use two 1024px sized images and achieved an even better readability than before.
Maybe a workaround like that would work for you, too.
Is anyone else having this issue? I create websites for a living, and some employ the use of the css property background-size: cover. All of the sudden about 1 week ago, all of the sites with this property no longer display right in Google Chrome. (all other browsers are working fine.) Is anyone else experiencing this? Is it just MY google chrome or did something change? Because the backgrounds were displaying properly until about a week ago, and I did not change anything. They just stopped displaying properly, seemingly out of nowhere....
Best practice: always set background-image first and then background-size.
You only need to use !important :
background-size: cover !important;
I just ran into this problem in Chrome, too.
None of the above answers worked for me. Specifically, I was trying to set the <body> element background to background-size: cover. However, the background image would never extend vertically to fill the page.
After some trial and error, I found that setting the <html> element width and height to 100% fixed the problem in Chrome. (For what it's worth, changing the <body> element's width and height seemed to have no effect.)
In my css, I have the following rules to fix the issue:
html {
width: 100%;
height: 100%;
}
I was having the same problem all of a sudden w/ not only GC but also FF and Opera. i was using a php function to pull random images for my background and this is what i had....
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
background-repeat: no-repeat;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
and HTML/PHP:
$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';
it was working for some days and suddenly background-repeat and background-size stopped working. so this morning i found out that the following changes are working perfectly for GC (v21), FF (v14), Opera (v12) and Safari (v5.1.7)...still no luck w/ IE though :(
CSS:
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
HTML/PHP:
$result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';
may be it's a lousy solution but it's working for me (so far) hope this helps some one :)
The following is a solution to the problem, but it won't be for everybody. I estimate that this solution will help a minority of the people experiencing the author's problem.
The background-size option can stop working in chrome if your container is too small, vertically, compared to your background image.
I was in a situation where I had to position a small portion of a large background image across a div that was 7 pixels tall.
In the Chrome debugger, changing the div height to 9 pixels "snapped" the background-size into place.
My ultimate solution was to restructure my divs so that I would not run into this problem.
To see if this solution will help you, in the Chrome debugger, enlarge your div. If, at some point, the background-size snaps into place, then you know this is the issue.
Old question but has similiar issue and it turned out I needed to add and to the empty div's I was applying background-size: cover to.
You must do CSS hacks for google chrome.
Use body:nth-of-type(1) .elementOrClassName{property:value;}
only for google chrome.
for your case,
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
Try this
background-size:contain;
For me, following worked for Chrome, IE 8, IE 9:
.itemFullBg{
background:url('image/path/name.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image/path/name.png',sizingMethod='scale');
}
You can fix the problem by setting the height of the tag.
For example, if you have a page that has a background image, set the height of the html and body tags in the CSS, like so:
html { height:100%; min-height:100%; } body{ min-height:100%; }
hope this helps
Instead of using:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Use:
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
I am searching this and googling out since quite a few days now, but not getting satisfactory solution.
I have an aspx page, the background property of the body has an image like . The image size is 3000 X 2000 px. So when rendering the page, the image is not coming properly and is bloated because its not resizing itself according to the size of the window (or more precisely the resolution of the screen).
How can I resize the background image so that it fits in exactly as per the browser window size without cropping or bloating?
Can it be done setting the CSS or using jquery/javascript.
Any pointers would be very great!!!
I bet this might work for you.
I was having a hard time looking for answers for this too and came across this page -> css-tricks.com
I then tried to use the code provided on the page and it worked perfectly. :).
html {
background: url(images/green_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
There is a new property for backgrounds in CSS3 called "background-size"
Try this:
<html>
<head>
<title>Background-Image Test</title>
<style>
body {
background-image: url(./3840x1200.jpg);
background-size: 100%;
background-origin: content;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!-- your content here -->
</body>
</html>
You can find more informations about the CSS background properties here:
http://www.w3.org/TR/css3-background/
Hope this helps :)
Edit: Changed Link from working draft to final version ;)
See this SO question it talks about making a picture stretch 100% the size of the window.
A background-image never resizes. (Unless you’re using the new background-size, which only newer browsers (CSS3) support)
What you can do is put a scaling div below your content-div and add your image there as an <img> with proper scaling.
<div style="position:absolute; background:#cccccc; width:100%; height:40px;">bg</div>
<div style="position:absolute;">content</div>
i can get images scaled to fill the window when they are the content, like so:
(without any html5 or div)
<style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<img src="wacard.png" alt="original image" title="">
but
this fails (both "html, body" and just "body")
<style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<body
style="background-image: url(wacard.png);">
</body>
as picked up picked up from here: Resize HTML5 canvas to fit window but as far as i understand, that must have some more fancy code than i know of, going on, ... or i'm doing something wrong...
how can i get background images to scale?
(ideally, without javascript)
Here is a great tutorial with several solutions:
http://css-tricks.com/perfect-full-page-background-image/
Complete with demos and the step by step coding process.
The HTML5 way mentioned is:
html {
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;
}
There is an ie fix mentioned in the article.
As I understand you want to create a full page re-sizable background. If so, follow the instructions here => http://css-tricks.com/perfect-full-page-background-image/
Also consider for further review and options, as in my case, the value of the
background-position:
setting options...
http://developer.mozilla.org/en-US/docs/Web/CSS/background-position
and also
background-origin:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
that accompany the backbackground-image CSS style setting.
afaict, with a background image added
e.g. background: url(back.jpg) fixed;
all that's needed to make it scale, is
background-size: cover;
less is more. ;)