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%
}
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.
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%
}
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%;
}
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/