How do I make a background image scroll and not be tiled on the page?

html background image no-repeat without css
make background image scrollable
css background image not scrollable
fixed background image scrolling content
scroll background image
moving background image css
background image doesn t move when scrolling
how to stop scrolling image in html

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.

*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

How do I make an image fill browser?, How do I make a background image fit my screen in HTML? Many users may want to create a single large image as their background. If you are planning on doing this, be considerate of people with slower Internet connections. Large images take time to load and may not look proper with people using a smaller monitor size or resolution .

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.

html, " included in your page, set margin and padding to 0. Then, you set your width and height both to 100%. Draw a rectangle on the page. Use the Fill menu to set a tiled or non-tiled background image to fill the rectangle. Add a background image to fill the rectangle and set the desired display options in the Fill menu. Click the Scroll tab in the Fill menu and set the scroll options.

Set a few options for your background-image:

html,body{

    background-image: url('your/image/path');
    background-repeat: no-repeat;
    background-size: cover; // this fills up the complete page.
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Hope it helps!

background-repeat, *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  Tip. We recommend you use the CSS solution to create a non-titled background image. See: Create a web page with a single background image not tiled. This page only covers how to do create a fixed background in the HTML BODY tag, which is now deprecated.

https://css-tricks.com/perfect-full-page-background-image/

In this site's version, it works perfectly. here's the code:

html { 
background: url("image.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

How to add static image on Background? - HTML & CSS, repeat-x : tile the image horizontally; repeat-y : tile the image vertically; no-repeat : don't tile, just show the image once  It works, as long as the divs inside are smaller than the window. If you scroll vertically, the background image does not fill the page anymore, and shows a white/grey area instead. So my question is: how can I combine a 100% background image with scrolling content? This is my CSS:

CSS background-repeat property, Hello, I want to add some static images on background but I don't know how to do this. one of those situations where it probably is OK for IE6 not to get the same treatment. Though… you're saying the TILED isn't supposed to scroll and the girl is? One of the images is the girl, and the other one is the shadow for page. The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. no. Read about animatable. JavaScript syntax: object .style.backgroundAttachment="fixed" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property. #N#background-attachment.

WebD2: Background Images, Note: IE8 and earlier do not support multiple background images on one element​. CSS Syntax. background-repeat: repeat|repeat-x|repeat-y|no-repeat|  Open the MS Word file you want to add an image background to. Go to the ‘Design’ tab and click the ‘Page Color’ drop-down in the ‘Page Background’ set of tools. A pop-up menu will open with colors to set as the background. At the very bottom of this pop-up is an option ‘Fill Effects’. Click it.

HTML Body Background: Here Are The CSS Properties To Replace , You will explore at two types of background images, tiled images and large size If you do not want the background image to repeat, you can define no-repeat. the background image will scroll along with the rest of the elements on the page  The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. The background-image is not repeated. The background-image is repeated as much as possible without clipping. Sets this property to its default value. Inherits this property from its parent element.

Comments
  • Thanks so would it be: <script type="text/css"> { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} </script> is that right?
  • Hi @NathanTaylor, I've update the answer :) you say you have a background image - how are you setting this background image? With CSS? I'm assuming it is set with CSS on the body element
  • im not to sure its a very basic html code im new to coding so im just playing about with it the code is something like <image source= Filepath/image.jpg> then ive got <div settings I don't have access to my code as im at work this is a personal project
  • Ah ok, well I've updated the above to include background-image, you should update this to reference your background image, and remove other occurrences, you shouldn't really be setting a background image using <img src="*" /> .... :)
  • ive tried this with my code and it doesnt seem to work the picture doesnt show any ideas?