I'm trying to make a background image for mobile devices like:
body {
background: url("/resources/img/background2.jpg") no-repeat fixed;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100% 100%;
}
In Chrome developers' tools it looks nice, but on a real device (with a smaller screen size) it does not. Why is this, and how I can solve this problem?
Snapshots:
You want a responsive background image which can get scaled down on smartphones. Use this:
background-image:url('/resources/img/background2.jpg');
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
How about?
background-image: url("/resources/img/background2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
Try use <meta name="viewport" content="width=device-width, initial-scale=1">
This is the best solution
body {
background: url(../images/background.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
background-attachment: fixed;
background-color: #fff;
-webkit-background-size: calc(100vw) calc(100vh);
-moz-background-size: calc(100vw) calc(100vh);
-o-background-size: calc(100vw) calc(100vh);
background-size: calc(100vw) calc(100vh);
}
Related
I'm trying to center and cover an image up the whole screen which is coming from the Unsplash Source API.
I think because the image actually gets fetched after the CSS is already applied it doesn't work just like that:
(If the demo might appear covered up run it in full-screen)
html, body {
margin: 0px;
width: 100%;
height: 100%;
}
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
background: url(https://source.unsplash.com/collection/1228371) no-repeat center center fixed;
}
<div class="centered-image"></div>
Do you guys know a work-around?
.centered-image {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
background-repeat: no-repeat;
height: 100%;
background-image: url(https://source.unsplash.com/collection/1228371);
}
Made some CSS Changes. Give this a try.
I'm trying to fix the background image. On other devices is displayed well... but in Safari iOS looks very ugly. The code is as follows:
.main {
background: url('imgs/bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
Thus it is seen:
The code is here: https://github.com/lozanotux/lozanotux.github.io
SOLUTION (CSS):
.main {
background: url(../imgs/bg.jpg);
background-color: #444C5C;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
zoom: 100%;
}
My question is about "background-image" in CSS. How can I add "background-image" in full screen? I used "width: 100% " but it doesn't work.
html,body{
height: 100%;
}
body{
background-image:url(http://www.cutestpaw.com/wp-content/uploads/2016/02/s-Yoshi-The-Seal-Kitteh.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
body {
background: url(http://i.imgur.com/aZO5Kolb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100% 100%;
}
html {
height: 100%
}
This image is too big, I want it to fit the size of the window: http://zgaming.comxa.com
but I do not understand how, I also tried height and width 100%
html
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></img></div>
css
.bgimg {
position: absolute;
top: 0;
left: 0;
z-index:-99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I also tried this
.bgimg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index:-99;
}
.imgbg {
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This answer
https://stackoverflow.com/a/43612299/7874902
works but on mobile there is some white space at the bottom..
You should set
background-image: url("http://zgaming.comxa.com/dist/img/bg.jpg");
and try with
background size: contain;
as with cover it's possible it cuts a part of the image.
check this:
w3schools.com/cssref/css3_pr_background-size.asp
Hope this code spinet help you.
.bgimg {
width: 100%;
margin: 0;
padding: 0;
}
.bgimg img {
position: absolute;
top: 0;
left: 0;
z-index: -99;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
<div class="bgimg"><img src="http://zgaming.comxa.com/dist/img/bg.jpg"></div>
This solution is purely meant to only show how to try and fill the viewport with a single image, no extras.
We use min-height: 100vh to tell the body tag to be as tall as the viewport. we use background-size: cover to center the image an have it fill all of the body element, cropping if necessary but maintaining aspect ratio.
body {
margin: 0;
height: 100vh;
background-image: url( 'http://zgaming.comxa.com/dist/img/bg.jpg' );
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
There's one major thing you have to realize with trying to fill a viewport, especially viewports with varying aspect ratios; you'll either have to crop part of the image at some point or distort it. Below we chose to crop it over distorting it.
You can't use background-size: cover on a img tag.
Just try to make background-image with yours and make div size at 100% on width and height.
You can make this rule directly on body :
body {
background: url(./path_to_your_image) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background: url('http://zgaming.comxa.com/dist/img/bg.jpg') center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
margin: 0;
}
html{
height: 100%
}
How do you get a Body Background image in CSS to stay fixed even as you scroll to content off the page. I've put a fiddle up: http://jsfiddle.net/eSALE/7/
This is my current CSS body code:
body {
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See the fiddle for the rest of the code.
Remove
background-color: #333;
under 'html, body {}' at the beginning of your CSS Style sheet.
Edit: All you really need to do is remove the top HTML in your stylesheet so that the style reads:
body {
background #333;
}
As mentioned in the comments, this is done as a fallback if the background image cannot be displayed.
Remove the background image from body tag and add to site-wrapper
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
DEMO
this is the solution of the problum
body{
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg');
background-repeat:no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:center center;
background-attachment:fixed;
}
fiddle
This should do the trick..........
html {
background: url('http://s22.postimg.org/u9jjshrfl/nature_desktop_background_wallpapers.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Here's the updated fiddle......
http://jsfiddle.net/xcKs9/1/