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/
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.
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%
}
I'm trying to cover up a html body background image by another image. I used z-index but can't get it working. Am I missing something or just can't understand what I'm doing.
See sample code below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://lorempixel.com/output/food-q-c-640-633-1.jpg');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}
.content {
/*height: 700px;*/
height: 100vh;
background:rgba(255,255,255,0.5);
/*margin-top: 20%;*/
}
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
Additionaly, inside the main-content are divs with 100vh and
background opacity
Main content images should be on top of everything including the content div with background opacity.
Use 100% width and height on #main-content, like:
#main-content {
width: 100%;
height: 100%;
}
Have a look at the snippet below:
body, html {
margin: 0;
/* The image used */
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
z-index: 10;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
width: 100%;
height: 100%;
}
<div id="main-content"></div>
Hope this helps!
It will work if you define a height for the div with CSS. Or insert content so it will expand vertically.
A background image makes sense for an element that contains more content, otherwise you can insert the image with <img>
You mean something as below, if so then set #main-content height:auto and it works fine, if you set height:100% then it takes that as 100vh, which on scroll hides image placed at top, so try as below.
So now #main-content height:auto calculates and takes height assigned to child elements present inside it and the background image which is assigned to this div #main-content can be seen only till height of 100vh, after that the default image that is assigned to body get visible.
body, html {
margin: 0;
background-image: url('http://lorempixel.com/output/nature-q-c-1176-907-10.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
#main-content {
background-image: url('http://placehold.it/500x500');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width:100%;
height:auto;
}
.content {
height: 100vh;
background:rgba(220,60,60,0.6);
color:#fff;
}
<div id="main-content">
<div id="main-content">
<div class="content">something in here..</div>
<div class="content">something in here..</div>
<div class="content">something in here..</div>
</div>
</div>
My background image is cutting off my text when the screen size is adjusted smaller. The background image is also not 100% of the screen height when viewed in large screens. What am I doing wrong?
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
background-size: cover;
max-height: 1200px;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Add min-height:100% for .slider class and add height: 100% for their parent body tag.
Remove width, overflow, height in .slider class.
Should be -
body {
height: 100%;
}
.slider {
background: url("../images/bg2.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
}
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);
}