I have set a image which has a resolution of 1980 x 1200 as background for the web page. When I scrolled down (I think after the height of 1200 px) the image just dissappears and white color background appears. This happens only in Chrome, in safari it works perfect. Here's what I've used in CSS
body,html{
margin-top: 0px;
background-image: url(../_images/1902974.jpg);
background-attachment: fixed;
background-position: center top;
width:100%;
height:100%;
}
I have also tried background-position:fixed but it doesn't work only on Chrome.
Do I need to add any code?
Simple way for a full screen background. (The BG image does not scroll like this). If you want it to scroll then set fixed to scroll.
CSS
html {
background: url(images/mybgimage.jpg) no-repeat center center;
background-attachment: fixed; /* Or scroll */
-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)
Answered based from here.
try adding minimum height to hundred percent to html and body
and background-size property to cover
Many way to achieve this but you can try:
body,html{
background-image: url(../_images/1902974.jpg);
background-size:cover
}
Related
I am trying to get a background image to cover the entire window but am having trouble getting it to behave the way I'd want.
I currently have
'background-size': 'cover'
However, I find when shrink the width, the image tiles.
So I changed it to:
'background-size': 'cover',
'background-repeat': 'no-repeat'
But now, just white space appears below the image.
So then I tried
'background-size': 'fill',
'background-repeat': 'no-repeat'
However, now when the image is smaller than the window, it doesn't expand to fill the window.
What is the best solution so that the image covers the entire screen, doesn't tile, and doesn't have white space regarldess of the size of the image?
You could explicitly set the size of the background to cover the entire viewport by setting the height to 100vh (i.e. 100% of the available viewport height). This coupled with background-size: cover should handle your scenario :
body {
background: url('{background-url}');
background-size: cover;
height: 100vh;
}
Example
You can see an example of this in action here and demonstrated below :
Try this:
html {
background: url(...) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Should work with Safari 3+, Chrome Whatever+, IE 9+, Opera 10+, Firefox 3.6+
Source: css-tricks.com
you have to give him
height: 100vh
body{margin: 0px;}
div{
background-image: url(https://placekitten.com/400/600);
background-size: cover;
background-position: center;
height: 100vh;
width:100%;
}
<div>
</div>
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.
This is probable one of the most basic questions on this website, hence I expect some quick answers. When I try to set a background image for my website I edit the image in paint and I constantly have to edit the image pixel for pixel in order to make the image cover up every single area of the website. Is there any standards or html codings that can automatically set resize the image to the exact size of the website?
You need to do something like this:
/*************************************************************************************
by forcing `height: 100%` in the html and body tag will make sure there are no white areas in vicinity (this is optional though, use it only if you need it)
*************************************************************************************/
html,
body{
height: 100%;
}
/*************************************************************************************
by using `background-size: cover;`, you will make sure the image will cover everything
*************************************************************************************/
body{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("your_image.jpg");
}
Also, consider using -moz-, and -webit- prefixes to make sure it works in older browser versions of webkit and gecko based browsers.
In your CSS stylesheet you can use the following code
(where images/bg.jpg is the path for your background image)
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;
}
Works in:
Safari 3+, Chrome, IE 9+, Opera 10+, Firefox 3.6+
Are you familiar with css? Add the background as image:
<img src="yoursource.png" class="yourclass" />
and use this css snippet:
.yourclass {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100; /* puts image into the background */
}
I'm assuming you're setting the background image on the body but if not you should be. use background-size: cover; which will stretch the image to fit
I'm using the new CSS3 spec "background-size" to have a background image that slightly overflows the size of the page. It's working fine in webkit (Chrome & Safari) but the "-moz-background-size" property is not working at all in Firefox. The unusual thing is, if you view the site live, the "-moz-background-size" property IS showing when viewing the site with Firebug! The FF docs say that it is supported as of 3.6 and I'm running 3.6.
Here's my code:
#media screen and (max-width: 1150px) {
/* special sytles for browser windows less than 1150px */
body{
-o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
background-size: 130%;
}
#trans_fake{
-o-background-size: 130%; -webkit-background-size: 130%; -khtml-background-size: 130%; -moz-background-size: 130%;
background-size: 130%;
}
}
Any debug suggestions?
EDIT
I'm more confused now... QuirksMode.org is reporting a "white" box rather than red or green to indicate css3 background-size percentage-based compatibility in Firefox 3.6 :(
http://www.quirksmode.org/css/background.html
I was running into the same issue this morning and what solved it for me was making sure the image was listed ahead of the background-size property. It was working in one instance and not in another. Why? The order of the CSS properties. Try this.
.front #logo {
height: 58px;
width:323px;
margin-left: 10px;
background:url(../imgs/logo-x2-retina.png) no-repeat;
-o-background-size: 100%;
-moz-background-size: 100% auto;
-webkit-background-size:100%;
background-size: 100%;
margin: 0 auto;
This turned out to be a CSS mistake on my part, I had a
body{
background:url() top center no-repeat;
}
later down the page which was somehow overridding the Firefox "-moz-background-size: 130%". So, if you're having trouble, give
body{
background-size: 130% !important;
}
to your CSS in Firefox and it might solve the problem.
Your page looks the same to me in Firefox 3.6, Firefox 4.0 and Chrome, but I can't see any background-size in any of it? Do you have a link to a page that actually demonstrates the problem?
My initial suggestion would be to specify both width and height and see if that works:
-moz-background-size: 130% 130%;
Change your CSS background from
background:url(../imgs/logo-x2-retina.png) no-repeat;
to
background-image:url(../imgs/logo-x2-retina.png);
I am wrote:
background-size: 100% 100%, auto;
And all work