I have an image which i need to stretch whole body so i don't know what is best way to do this
html{
/*background image properties*/
}
or
body{
/*background image properties*/
}
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
This would be the best way, you could apply it to the HTML, it really depends on what you prefer...
background-image:url('../images/background.jpg');
Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.
background-attachment:fixed;
When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.
background-repeat: no-repeat;
When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.
background-size: cover;
When you apply this you will set the background-size to cover, combined with no-repeat and attachment: fixed it makes for a good way to style your background image
As per the CSS 2.1 Specs here: http://www.w3.org/TR/CSS2/colors.html#background
For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. For
documents whose root element is an HTML "HTML" element or an XHTML
"html" element that has computed values of 'transparent' for
'background-color' and 'none' for 'background-image', user agents must
instead use the computed value of the background properties from that
element's first HTML "BODY" element or XHTML "body" element child when
painting backgrounds for the canvas, and must not paint a background
for that child element....
Hence, it is recommended to use a background on body (rather than on html).
If you want a background-image to stretch the whole container (i.e. body), then you could use the style:
background-size: 100% 100%;
If you want to preserve the aspect ratio, then you could use cover to make it cover the full container, or use contain to keep it within the container boundary. When you use contain, then depending on the aspect ratio of the background image, you could end up with white-space below or after the image ends (letterbox).
background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...
.
body{
/*background image properties*/
}
this would be the best way, since body is the immediate parent of all elements which are visible on the webpage.
http://jsfiddle.net/hxyz2evq/
You can use background-size:contain; to cover all the area with background image
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-cover;
background-repeat:no-repeat;
}
Note: Also there is a case I think of:
<html>
<head>
some free data
</head>
<body>
</body>
</html>
here the some free data will get displayed inside the webpage, i.e inside body, so we wouldnt care about giving the background property to html tag,
just using body{//background properties } is fine
Edit:
Though this is not the question for what property should be used here. There can be various things like:
background-size:cover;
OR
background-contain;
OR
background-100% 100%;
The best property which suits your question would be background-100% 100%;
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
Semantically, I would use in body.
body{
background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}
Seems to be applied in whole body semantically.
You should target the body tag and apply the background-size property to it.
Like so
body{
background-size: 100%;
}
You can use
body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}
Try this code :
<!DOCTYPE HTML>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>
Example : Check this
The CSS3 background-size:cover property handles full screen background images, including responsivity, quite well. The below works well for me on all desktop and mobile devices I've tested.
body {
background-image: url(/assets/img/yourimage.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:100%;
width:100%;
}
background:no-repeat url(' ') #154454 bottom center ;
background-size:contain;
body {
background-image: url(/_assets/img/zoom-17536689-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.bk
{
background: url('../assets/imgs/img.jpg') no-repeat center center fixed;
}
put it between the body tags, sample code below
Set two background images for the element:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
The full manual can be read here CSS background-image Property
Related
I would like to have a picture as a background. I've written it in my CSS stylesheet as following:
body {
backgroung-image: url('link to my picture');
width: 600px;
}
When looking at this in the browser I see maybe a fifth of it since it is so big. Is my width property doing anything in the code above? How can I adjust the size of the picture so it fits the HTML element?
Use background-size: cover; to make the background-image cover the whole body element.
body{
background: url('http://placehold.it/350x150') no-repeat;
background-size:cover;
}
Note: I have used no-repeat because the default value for background-repeat: is repeat;.
If this syntax makes more sense to you then can use this one as well:
body{
background: url('http://placehold.it/350x150');
background-repeat:no-repeat;
background-size:cover;
}
DEMO http://jsfiddle.net/a_incarnati/puakv13x/
It seems like you have a spelling error (backgroung-image: url('link to my picture')) this should be changed to background-image: url('link to my picture').
The answer to your question
How can I adjust the size of the picture so it fits the HTML element?
Do this by adding a background-size:contain. You can also define how many pixels you want it to be; background-size: 150px 100px the numbers are (x, y).
It may also be required adding a background-repeat: no-repeat if image is not scaled.
Take a look at this site: http://www.w3schools.com/cssref/css3_pr_background-size.asp
in your style.css, or in your index.html;
body {
background-image: url("paper.gif");
background-repeat: no-repeat;
}
I'm trying to make a GIF fit my whole screen, but so far its just a small square that is on my screen while the rest is white. However, I want it to take up all the space.
Any ideas?
if it's background, use background-size: cover;
body{
background-image: url('http://i.stack.imgur.com/kx8MT.gif');
background-size: cover;
height: 100vh;
padding:0;
margin:0;
}
IMG Method
If you want the image to be a stand alone element, use this CSS:
#selector {
width:100%;
height:100%;
}
With this HTML:
<img src='folder/image.gif' id='selector'/>
Fiddle
Please note that the img tag would have to be inside the body tag ONLY. If it were inside anything else, it may not fill the entire screen based on the other elements properties. This method will also not work if the page is taller than the image. It will leave white space. This is where the background method comes in
Background Image Method
If you want it to be the background image of you page, you can use this CSS:
body {
background-image:url('folder/image.gif');
background-size:100%;
background-repeat: repeat-y;
background-attachment: fixed;
height:100%;
width:100%;
}
Fiddle
Or the shorthand version:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
Fiddle
You can set up a background with your GIF file and set the body this way:
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
Change background image URL with your GIF. With background-position: center you can put the image to the center and with background-size: cover you set the picture to fit all the screen. You can also set background-size: contain if you want to fit the picture at 100% of the screen but without leaving any part of the picture without showing.
Here's more info about the property:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Hope it helps :)
if you're happy using it as a background image and CSS3 then background-size: cover; would do the trick
This should do what you're looking for.
CSS:
html, body {
height: 100%;
margin: 0;
}
.gif-container {
background: url("image.gif") center;
background-size: cover;
height: 100%;
}
HTML:
<div class="gif-container"></div>
In your CSS Style tag put this:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}
Also make sure that it's parent size is 100%
Hi Please do not bash on me or give me negative vote because I really did spend the time and trying to find the answer. From what I searched, this is what I have. I am trying to make a background image as my body but when I put no repeat on, it just a single tile rather than it stretching. Ive been trying to find a code that will stretch it out but nothing is there. I tried youtube and tried looking on here
this is my code
body{
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
background-repeat:no-repeat;
}
my HTML
<html>
<body>
<div id="container">
</div>
</body>
</html>
Embedded Demo
jsFiddle Demo with code
A better approach than using the body element would be to place a div that does this for you.
<head>
<style>
#background{
background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
position:fixed;
right:0;left:0;top:0;bottom:0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="bacgrkound"></div>
</body>
This will work:
body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-size: 100%;
}
body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-repeat:no-repeat;
background-size:cover;
}
This will cover your screen.
http://jsbin.com/IJObemU/1/
body{
background: url(image.jpg) no-repeat center center fixed;
background-size: cover;
}
you can remove the fixed when you need to make your background cover bot not on the body element (if you're applying the background on some element that scrolls with the page).
I have a large image that I want to set as the background for a 404 page. I want the image to be 100% wide every time someone loads the page, so that if their screen is smaller the image becomes smaller, if the screen is bigger, the image stretches. The height should change based on the width, it doesn't need to be the height of the page.
I don't have the code for this. Would it be better to do it in the HTML file or the CSS file?
Can you possible create a JSfiddle that could serve as an example? Thanks!
Just add this to your CSS code...
body {
background-image:url('http://imageshack.com/scaled/large/268/gjb.png');
background-size:100%,100%;
}
And then create a body...
<body>
Dummy Code
</body>
jsFiddle
This is best left to CSS. Hard to tell without your code exactly, but the following should do what you want:
CSS
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;
}
#background {
width: 100%;
height: 100%;
background-image: url('http://www.placekitten.com/200/200');
background-repeat: no-repeat;
background-size: 100%;
}
HTML
<div id="background">
<div id="content">
Hello world!
</div>
</div>
UPDATE
See the fiddle here: http://jsfiddle.net/DrydenLong/jywbd/
UPDATE #2
I'd like to point out, just in case those reading through don't see the comments on my post below, that while applying the background-image property directly to the body selector is simpler, it will also apply that same image to every page referencing that CSS file. Should you choose to use a single CSS file for your entire website, my code above will make it easier to have different background images for the 404 page and the rest of the site.
HTML Body content
none
CSS
html {
background: url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Demo(updated)
I think what you are really looking for is a background-attachment property.
body {
background-image:url('http://IMAGEURL');
background-attachment:fixed;
width: 100%;
}
You dont need to setup height property here, it's done for you automatically.
How about this:
body{background:url(http://www.astrophotography.co.nz/Lrg_Slides/20120619Milkyway.jpg) 0 0 no-repeat; background-size:100% auto;}
i can get images scaled to fill the window when they are the content, like so:
(without any html5 or div)
<style type="text/css">
img {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<img src="wacard.png" alt="original image" title="">
but
this fails (both "html, body" and just "body")
<style type="text/css">
body {
width:100%;
height:100%;
margin:0px;
}
</style>
and
<body
style="background-image: url(wacard.png);">
</body>
as picked up picked up from here: Resize HTML5 canvas to fit window but as far as i understand, that must have some more fancy code than i know of, going on, ... or i'm doing something wrong...
how can i get background images to scale?
(ideally, without javascript)
Here is a great tutorial with several solutions:
http://css-tricks.com/perfect-full-page-background-image/
Complete with demos and the step by step coding process.
The HTML5 way mentioned is:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
There is an ie fix mentioned in the article.
As I understand you want to create a full page re-sizable background. If so, follow the instructions here => http://css-tricks.com/perfect-full-page-background-image/
Also consider for further review and options, as in my case, the value of the
background-position:
setting options...
http://developer.mozilla.org/en-US/docs/Web/CSS/background-position
and also
background-origin:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
that accompany the backbackground-image CSS style setting.
afaict, with a background image added
e.g. background: url(back.jpg) fixed;
all that's needed to make it scale, is
background-size: cover;
less is more. ;)