I have an HTML file as shown below. It uses the "background-size:cover" setting on element.
When I open the file using the File/Open option on IE9, it shows the background image covering the entire window. This is expected behavior.
But, when I open the same file via an Apache server (http://127.0.0.1/test.html) the background image does NOT cover the entire window horizontally..... it leaves a blank vertical strip on the right end of the window. This is NOT expected behavior.
I see the same behavior with other background image files too. It seems that when getting the HTML page from Apache server, the "background-size:cover" setting will only enlarge the image upto some extent. But when getting it using the File/Open option, it enlarges the background image enough to cover the entire element width.
And, also see similar behavior with other settings of the background-size value (e.g. when I set background-size:100% 100%;).
Here's the HTML file:
<html>
<head>
<style>
body
{
background:url('desert.jpg');
background-size:cover;
background-repeat:no-repeat;
}
</style>
</head>
<body>
This is a line
</body>
</html>
Try this code, it's should resolve your issue:
<style>
body
{
background: url("desert.jpg") center center fixed no-repeat;
background-size: cover;
background-color: #000;
overflow: auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='desert.jpg', sizingMethod='scale')";
}
</style>
For further explanation read this article: http://cookbooks.adobe.com/post_scale_background_image_to_browser_size-17590.html
Related
I've been fiddling with my background image in CSS for a couple hours now and have tried searching through articles to find a solution but still have nothing. I'm trying to make my background image fit the screen no matter what the browser size.
At first I was using this CSS code which seemed to be working:
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
But then when I re-sized the browser this happened: http://prntscr.com/j1d4kv
I then went and found another solution that said I should put the background image in the html tag, which i tried:
html {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
}
This fixed the issue of the background image not fitting to the bottom when the browser size changed, but then I had this issue when I was full screened: http://prntscr.com/j1d742 It left a gap on the right side!
Most likely your body doesn't reach the full height of the browser window, if it doesn't have much content. Add this to correct that:
html, body {
height: 100%;
}
You want to add,
background-attachment: fixed;
Here's an example: https://embed.plnkr.co/3Y7O1TQa8ssPQKVq0tCW/
I'm trying to put a image background in a fullscreen div.
What's working:
load the code in a browser
reload the page
the background should display correctly
The problem:
load the code in a Chrome browser
make sure the page is scrolled down
reload the page
the background is mangled
I would not using the <html> tag as I need to swap the background and do animations which would corrupt the html.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #background { height:100%; margin:0px; }
#background{
width:100%;
top: 0;
position: fixed;
background: url(http://lorempixel.com/400/200/sports/) no-repeat center center #fc0;
background-size: cover;
background-attachment: fixed;
z-index: -1;
}
#content { background: #0cf; width:400px; height:2000px; margin: 0 auto; }
</style>
</head>
<body>
<div id="background"></div>
<div id="content">The content</div>
</body>
</html>
Please note I'm not using JSfiddle as to test this behaviour we actually need to reload the page.
Here's some images, sorry for the delay in my reply!
1) Here is what happens when I first load the page
2) When I scroll down
3) If, while my scrollbar is down, I reload the page I get this!
The background image is distorted by default as the background image is very small 400 x 200 px.
I don't see any difference when reloading the page except that the image is changing.
Have a better resolution image to avoid distortion in bigger screens
I'm just starting to use phonegap and am having a problem displaying a background through both the body and a div. The background image I am using is the same as the splash screen, and the only difference is that the splash screen loads the image, while the css won't display it. Here is my code...
<style>
#bg {
background: url(_images/splash.png) top center no-repeat;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="bg">
Hi
</div>
I've tried adding quotes around the image url, adding and removing the "top", "center" and "no-repeat", and also tried using background-image instead of just background, but nothing is working for some odd reason. I've managed to have a background color work, just the imaging won't work.
And since I am using dreamweaver's design view/live view, I also check to make sure the image shows up before I download the app all over again to my phone.
I had the same issue with Android and Phonegap. What worked for me is setting the background-size and background-position with the image, like this:
#bg
{
background: url(_images/splash.png) no-repeat center center;
background-size: 100% 100%;
background-position:100% 100%;
}
My styles are also defined inline, I don't know think it has to do anything with the issue, but try it out.
<div style="background:url(uploads/front.jpg) no-repeat center center;
background-size: 100% 100%;
background-position:100% 100%;">
</div>
try to put your css at the end of the page.
otherwhise, open the file inside your desktop browser (don't care about errors).
if you can see the background, it's like a bug of phonegap.
if you can't see it, you've made an error (404, the file is not existing?)
I found my answer just by messing around with it. I guess the underscore in the directory name was not allowing it to work. So just in case anyone else runs into this problem, I guess avoid using underscores.
I was given this design that I'm trying to apply to my website. Notice that the <html> element has a background image (hands in the air), that sticks to the bottom of the page.
However, when I migrated the css files over to my application, for some reason this image appears halfway down the page instead. I've checked the relevant CSS and in both cases it's:
html {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("../../img/bg.svg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
outline: 0 none !important;
}
so why does the image stick to the bottom of the page here, but appear halfway down the page here.
You have height: 100% set for your html and body. This is normally done to able to have full-height elements. But in this case, this is proving to be the cause of the issue. Removing this it fix the issue.
Check in Firebug or Chrome Inspector and you will see some thing like:
html, body {
height: 100%;
}
Remove it. OR Override it from your style sheet.
It's not working on the 2nd site due to the body { height: 100% } styling.
static/bundle-bundle_responsive_head.css:
html, body {
height: 100%;
}
Looks like the computed height of the 1st link is set such that the image is at the bottom, whereas for the link where the image appears part way down the computed height is much lower.
height: 170px; compared to height: 2006px;
I'm not sure what's setting the height for you, but sorting that out will solve your image problem
Edit:
Actually it seems to be in this rule which is only on one of those sites:
media="screen, projection"
html, body {
height: 100%;
}
It looks like it's actually the background image on the body tag that is not sticking to the bottom. Turning off the height: 100% body rule in bundle-bundle-responsive-head.css fixes it, though I'm not sure how that will affect other things on the site.
I found this by using the DOM inspector in Chrome and turning on/off the rules for the various elements to see what effect they would have.
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>