How to make fixed background to cover entire screen in mobile browsers? - javascript

I am using following CSS hack
html {
background: url(background.jpg) no-repeat center center fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But when using mobile browsers , the height is of website is not covering the entire screen display ! what to do ??

You need to make the page the full height/width of the screen.
html,
body {
width:100%;
height:100%;
}

In addition to specifying the height and width, note that "background-attachment: fixed" is not supported in some mobile browsers. See the full browser support list (click the "known issues" tab at the bottom).
One way to work around this on mobile (but continue using "fixed" for other browsers) is to revert to "background-attachment: scroll" for mobile widths using a media query. For example:
If your original CSS was
#some-div
{
background: url("background.jpg") no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then your media query might look like this:
#media (min-width : 320px) and (max-width : 767px)
{
#some-div {
background-attachment: scroll;
}
}
Of course, if you don't need "background-attachment: fixed" in the first place, then just removing "fixed" from your first line might help.

Related

How can I stop background from moving when zooming out?

When the browser is at 100% the back images are great. Even at 50% zoom out they're still okay. but as you continue to zoom out all the way to 25% the background image position collapses or "hides" and I'd like the images' background-position: center top to remain intact no matter minimize or maximize.
I've attached an example:
http://i65.tinypic.com/k1e54z.jpg
You can also visit www.medshopandbeyond.com and zoom out in your browser to see what's happening. [BTW: I am aware of the grammatical errors in the pics :) ]
The only one that gets close enough to what I want is background-size:contain
however the image is no longer full width from screen to screen if setting it to this
#header-image4 {
background-image:url("{{ 'old-friends-555527_19201.jpg' | asset_url }}");
height: 750px;
position: relative;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-bottom: -50px;
background-size: cover;
width: 100%;
margin-top: -10px;
}
<div id="header-image4"></div>
This is because you are using background: cover and a fixed height. As you zoom out your height remains the same but the width increases and background: cover will expand to fill that width which is why you are getting an unusual crop. The same issue can be seen if you pull out the width of the browser window on a large monitor.
Personally, I'd create a different height for the div at different breakpoints e.g.
#media screen and (max-width: 1920px){
#header-image4{height: 1000px}
}
#media screen and (max-width: 2560px){
#header-image4{height: 1500px}
}

Background image is stretched in mobile safari

I am using background image for landing page and it works fine on desktop browsers, Android browser but fails on iOS browsers... After looking for answer i thing problem is due to height of the contained div which holds the background image.
I resized the height of the container div using jquery 'var wheight = $(window).height();'
I thing this get length of the whole document and gives feeling of image being streached.
I have setup example on fiddle this may come right on iOS as i have not tested after adding the height using jQuery.
What is the best way to handle this height issue.
SHould i use screen.height(); or there is a way around for this
http://fiddle.jshell.net/dtphzdxy/3/
Try this in css section
html, body {
margin:0;
padding:0;
}
.bg-intro {
width:100%;
height:100vh;
position:absolute;
}
.bg-intro {
width:100%;
}
.parallax {
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.parallax-1 {
background-image: url("http://www.hdwallpapersos.com/wp-content/uploads/2014/07/HD-Wallpaper-Nature.jpg");
transition: height 0.85s cubic-bezier(0.725, 0, 0, 0.995) 0s;
}
Window height can be calculated with css using the vh unit. Fiddle: http://fiddle.jshell.net/dtphzdxy/5/
.bg-intro {
width:100%;
height:100vh;
}

Background image in HTML

Please guide me how to set background image of the web page to full screen.
Also I'd like to this image to show fullscreen for all size monitors and mobile devices..
Right now I have an image with resolution 1920 : 1080 and it only looks good on my 19" monitor with resolution 1440 : 900, but not good on 15.4" laptops and mobile devices.
Please help,
Thanks.
The proper solution to keep the ratio to your image is to set background-size: cover.
If the background-size: cover; doesn't work for you, for example, if the aspect ratio of the image is wrong, then you can try using background-size: auto 100% to ensure that the picture keeps it's aspect ratio as well as being tall enough to fit the screen.
I think it all depends on the resolution of the image and the maximum size you're willing to have it. But you will need to put media queries into your code to ensure there are no gaps when the screen gets too big or too small.
Use background-size:cover; will help you.
Use background-size: cover; for newer browsers:
<div id="bg"></div>
html,body{
height: 100%;
}
#bg{
width: 100%;
height: 100%;
background: url(image-path.jpg) no-repeat;
background-size: cover; /* also include vendor prefixes: you may google */
}
check compatibility using background-size
Better solution for full background image with responsive can be found here
You can tackle this in two ways:
New browsers, Use the CSS:
background-size: cover
Old Browsers, use a fake <img /> for the background.
.bg {z-index: 1; position: absolute; width: 100%; height: 100%;}
The background image property for chrome, mozile and opera browsers
body {
background: url(images/image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Change backgroung-size using Javascript

I am working in jquery mobile and my background is image.Due to the different mobile screen sizes my images does not coves my full screen.It is possible only if this script works.
document.getElementById("pageone").style.backgroundSize = screen.width+"px" screen.height+"px";
But this is not working
Surely you can CSS for this.
html {
height: 100%;
background: url('../images/bg_cover_web.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Have you tried using a percentage width?
I haven't used jQuery mobile, but I have found that meta tags are important for responsive design: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

jQuery update css values

i have got a little problem with css on my homepage:
if i visit my page from a android device, and i scroll down,
the background image gets a little bit bigger, and if i
scroll up, it resizes again to the correct size.
I think the problem is: i load the pages with jquery's load()
into a div. Then the page size changes, but css still uses the
old size (at dynamic values (100% and cover).)
css:
body {
background: #000000 url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
max-height: 100%;
max-width: 100%;
overflow-y: scroll;
}
If you don't know what i mean: https://www.youtube.com/watch?v=I_ukAfoiqBo look at the background image
What i tried: i have no idea why this is happening (only on android devices) so till now i tried nothing :/
Xorg

Categories

Resources