Menu
I have a background image for my website, and when I sourced the image in Html it tiles across the page and stops in the same place. How can I resize the image to fill the window and scroll down the page so that the text and stuff just appears to be travelling up the page? I've used the code in your answer and the image shows and isnt tiled but it repeats down the page instead of scrolling down?
<body background="D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg" background style="fixed">
<style type="text/css">
html{
background-image: url(D:\Documents and Settings\HOME\Desktop\Nathan Taylor\Mancuerda\Web Page\Background copy.jpg) no-repeat center center fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
There's the script I'm using.
340
To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property.
To keep your background fixed, scroll, or local in CSS, we have to use the background-attachment property. Background-attachment: This property is used in CSS to set a background image as fixed or scroll. The default value of this property is scroll.
Set the background-size to "cover" to scale the images as large as possible to cover all the background area. Add links of the images with the background-image property. Style the content giving it a border and setting the width and height of it. Set the position to "fixed" so as it will be fixed while scrolling.
The background-repeat property As you might expect, this property allows you to control how and when your background images will tile to fill their containing element's area.
*Updated with jsFiddle: http://jsfiddle.net/q5WKg/1/
To stop the background from repeating you want to do in your CSS:
background-repeat:no-repeat;
To have the background always fill use the css3 property:
background-size: cover;
Because its not been widely implemented you will probably need to use vendor prefixes:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
In addition to your comments - in full it would look something like this:
<style type="text/css">
html
{
background-image: url('path/to/imagefile.jpg');
background-position:center center;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
If your background image was on the html element.
*Update 2
I would correct your code above, move your style declaration in to the head of the document (although where you put it will work fine in most browsers) and remove any info regarding the background image from the body tag.
Also the url you are providing is an absolute path to the file on your computer - you need to be using relative paths really, and not paths that are dependant on your computers file structure, I'm assuming that the HTML document is in the same folder as "Background copy.jpg". Therefore your code should read as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html{
background: url('Background copy.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%;
}
</style>
</head>
<body>
CONTENT
</body>
</html>
In addition to the updates to your code, I would change the name of any images you use to all be lowercase and to contain no spaces in their filenames - this will save you a lot of headache further down the line...
If you want to better understand how HTML/CSS works, and how to structure them properly I would read up at w3cschools, they have the option to "try it yourself" on a lot of pages which means you can see how the code should be structured and test out different things with CSS & HTML.
w3schools css tutorials - http://www.w3schools.com/css/default.asp
111
Probably this:
html {
background: url(images/your_file.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For IE - IE9+ only, other browsers - should work.
Much more info here: http://css-tricks.com/perfect-full-page-background-image/
P.S. You might also be interested in parallax.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
