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;
}
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
}
Related
I am new still a beginner to CSS and I have been having problems with getting my background to fill the age. I know contain and cover won't help me but even things like background-size and the widthand height commands aren't helping.
body {
background-image:url(X.png);
background-repeat:no-repeat;
width:100%;
height:100%;
}
Use html instead of body. cover should work, but it may depend on the browser as to how it act's for instance you may need to use -moz-background-size:cover if the browser is mozilla based.
Try add these style below:
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
It should work, please check my jsfiddle link:
http://jsfiddle.net/chris_poetfarmer/9xa35pwp/
I'm trying to create a page with a centered background image and using the position center center. But instead of appearing centered both vertically and horizontally the image appears to extend vertically beyond the top of the page. Where/why am I going wrong?
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>
Would you see the screen like below picture?
body{
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
I think It's because you didn't declare 'height'.
Add 'height:100vh'style.
body{
height: 100vh; /* ADD STYLE ! */
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
The reason for setting to 100vh is because the target is body tag.
If it's a different tag, use a different value.
Then this will be
And add 'margin:0px' style to remove the scroll.
body{
margin: 0px; /* ADD STYLE ! */
height: 100vh;
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Then you can see
Thanks!
You can use cover
background-image:url('tumbleweed.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
http://jsfiddle.net/ou10gmfd/
Try this:
background-position: 50% 50%;
Or maybe you should try a space before the first center (could be an issue).
Most likely this is because your image is to large use background-size: cover; to cover the whole background of the body
remove DOCTYPE html from your page and it will work fine.
or use background-attachment: fixed;. then you do not have to remove DOCTYPE html
I'm trying to place a fullscreen background image combined with a repeating background image without the use of J-query. Is it possible?
This is the code I use to get my image fullscreen:
body {
background: url(../img/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But now I want this completely overlapped by a .png image background that needs to have a repeat function, for the simple reason that the .png contains lines which will rescale and look awful on certain screen sizes.
Any ideas?
Already tried:
Giving html a background and body a background, it will only display one of both.
Be aware that multiple backgrounds won't work on ie8 if needed:
http://caniuse.com/multibackgrounds
This answer will work on every browser:
You must give width and height to the elements.
You can see answer here: http://jsfiddle.net/Rc38f/
HTML Code:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS Code:
html {
width: 100%;
height: 100%;
}
body {
background-image: url('http://www.colourbox.com/preview/4632391-637684-seamless-small-white-flowers-pattern-background.jpg');
background-repeat: repeat;
width: 100%;
height: 100%;
}
#wrapper {
background: url('http://i.telegraph.co.uk/multimedia/archive/02403/Jonstockshooting_2403237b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
}
It is possible to include two background images on one tag.
How it Works
Multiple background images can be specified using either the
individual background properties or the background shorthand property.
This should be a Helpful resource to get you started.
css:
body {
background-image: url(http://www.wallcoo.com/paint/Chiplegal_vector_art/images/%5Bwallcoo.com%5D_vector_art_0seasons.jpg), url(http://nopgc.org/v2/images/body_bg.jpg);
background-position: top center, center;
background-repeat: no-repeat, repeat;
width: 100%;
height: 100%;
}
fiddle: Demo
I'm trying to set a full-size background image using CSS and here is what my code looks like after reading several blogs, including one topic started here on this website:
html{
background-image: url('C:\Users\sony\Desktop\psddesigns\background.jpeg');
background-repeat: no-repeat;
background-position: center center;
min-height: 100%;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-attachment: fixed;
}
The image still doesn't show up. Its size is 2.4 megabytes. All files are on my pc.
put the css not on the html tag but on the body
body{
margin: 0;
padding: 0;
background-image: url(../images/background/australia_sky.jpg); //this is a relative path change it to your liking
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
use relative url ,eg( url(./psddesigns/background.jpeg) ) or upload it to the internet
Use relative path. Put your HTML file and the image in the same directory and then you can load the image using the relative URL like this:
html {
background-image: url('image-name.jpeg');
There are more you can learn about relative and absolute paths.
http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm
I tried to put a background on my whole page with
html {
background: url(images/panda.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This generally works just fine, but I have discovered a problem: On the left-hand side of the screen is a white stripe. Is it possible to fix that?
PS: Just in advance: No, that stripe is not on the picture. You can get an impression of how it looks:
EDIT: http://jsfiddle.net/uhwcW/
When zooming in/out the white stripe sometimes disappears or switches sides... Confusing.
Try;
margin: 0;
padding: 0
in your CSS for html.
Have you tried to reset your body? Try this for other containers too, maybe it's just some margin or padding you're seeing...
body {
margin: 0;
padding:0;
}
this worked for me..
html{
background: url(..//index3.jpg) no-repeat 0 0 fixed;
-webkit-background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
}
Just adding a center after the url did it for me
like this:
background: url(images/panda.jpg) center;