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>
Related
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
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
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
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.
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.
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.
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. ;)