I want adding background image with css but it did not work.Browser show me a blank page.
my application.css
home-body {
background-image: url('/home.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
file home.jpg located in a directory /public/home.jpg.
How fix?
If you are using an external CSS file... make sure to link the image file relative to the CSS file. For instance
-ROOT
-css
-file.css
-background.jpg
-index.html
you would need:
background("../background.jpg");
because ".." takes you up one directory :)
it may be caused by 3 problem
1- home-body is not a tag of html.so it should be id or class name of a tag.so you should use .home-body for class name and #home-body for id name.
2- you do not address the background image correctly.if you want to make sure, give the url as an absolute path to your image like http://yoursiteUrl/public/image/image.png
3- your css file is not loaded on your page.try to make sure it is loaded on your site correctly if it is loaded then the problem is first or the second part mentioned here.
Please use this code. Use background instead of background-image and make sure that you have inserted the correct image path in url().
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.home-body {
background: url('/home.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
width and height use 100% and use padding:0 for body element.very easy like this....
.play{
background: url("media_element/play.png") center center no-repeat;
position : absolute;
display:block;
top:20%;
width:50px;
margin:0 auto;
left:0px;
right:0px;
z-index:100
}
body {
background-image: url('img-url');
background-size: cover;
background-repeat:no-repeat
}
background-image:use onlybackground.