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
Related
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 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
}
So I have a full screen background set up like so:
#div {
background-image: url("images/slide1.jpg");
background-position: center 20%;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
The background image resizes according to all view ports sizes, but when I view the site from my mobile, it seems to be displaying a very small section of the whole image - basically the background-size: cover; rule doesn't seem to working. It should also be noted that if I make the window on my computer phone size, the background resizes properly. It also resizes properly when I view it using the responsive display tool 'responsivetest.net'. Just not when I actually open it on a phone.
Any suggestions are, as always, much appreciated.
I'm doing something similar for a portfolio site that's in development and it works fine on mobile. Here's my working code for CSS:
display: table;
width: 100%;
height: auto;
padding: 100px 0;
background: url(../img/bbg1.jpg) no-repeat bottom center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
So you can see some things you can try changing, such as the display height.
Test this site on your mobile device
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 have a 1024*768px image that I want to use as a background for a webpage.
I also want this background to cover the background of the entire window, even when it's resized. And.... I wan't the image to stretch least as possible!
I've tried the examples here, except the jquery one - since I'd like it better if only done in css.
thank you!
edit: here's the link: http://css-tricks.com/perfect-full-page-background-image/
You could try the backstretch plugin
It is a one line javascript solution, just include it (also jquery) in your headers and call it as the example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
// To attach Backstrech as the body's background
$.backstretch("path/to/image.jpg");
</script>
Official page:
http://srobbin.com/jquery-plugins/backstretch/
Github source:
https://github.com/srobbin/jquery-backstretch
I think some good old CSS can come in handy on things like this. This works well on desktop browsers and my iPhone/iPad:
html {
background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
overflow: hidden;
}
body {
background: url(YOUR-IMAGE-URL) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
overflow: auto;
}