preventing tiling of background image

**southadc** · Jan 29th, 2006, 05:15 PM

Hi,

is there a way in html (without resorting to css) to prevent a background image from tiling? I don't want to stretch it, just centre it. I am using:

<BODY BACKGROUND = "source ">

What do I need to add?

Thanks,

Dave

**sciguyryan** · Jan 29th, 2006, 06:29 PM

Try this:

Code:

<body style="background:  background-image; background-image: url(URL HEREE); background-repeat: no-repeat;">

And Penagate no complaining about inline CSS :P

Cheers,

Ryan Jones

**penagate** · Jan 30th, 2006, 06:43 AM

Originally Posted by southadc

is there a way in html (without resorting to css)

You don't "resort". You should be using it in the first place. Why do you think presentational attributes in HTML are deprecated, and in XHTML almost non-existent?

This will give you a centred background image that does not tile:

Code:

body
{
    background: url('yourimage.jpg') center center no-repeat;
}

If you want it to stay there when the page scrolls use this:

Code:

    background-attachment: fixed;

**southadc** · Feb 4th, 2006, 11:03 AM

OK, a better question would be this:

Why does this

HTML Code:

<HTML>
	
	<HEAD>
		<TITLE>page title</TITLE>

	<STYLE TYPE = "text/css">
	body {background-image: url(".\images\image.jpg"); background-repeat: no-repeat; background-position: center}
	</STYLE>	

	</HEAD>

	<BODY BGCOLOR = "silver" BGPROPERTIES = "fixed">

Only give me what I am looking for in IE (a silver background colour with a centred background image that remains fixed behind the text) but not in Firefox or netscape (the image does not display).

The background is that I am doing an in-class web design assignment where I have to use a background image and produce pages that display correctly in more than one browser. I have not done much css, but I will use it if need be. I could pass the assignment by tiling the image, but I wanted to try putting the image in the centre for the 'look' of it. My goal here is to display the image properly in IE and Firefox.

**penagate** · Feb 4th, 2006, 11:07 AM

My guess is BGCOLOR overrides the CSS. I still say you should do it through 100% CSS

HTML Code:

<html>

<head>
    <title>Lake Baikal</title>

    <style type="text/css">
    body
    {
        background: silver url('yourimage.jpg') no-repeat fixed center center;
    }
    </style>
</head>

<body>
    <!-- etc. -->

**southadc** · Feb 5th, 2006, 10:23 AM

OK, I have tried again using the following:

HTML Code:

<HTML>
	
	<HEAD>
		<TITLE>Page Title</TITLE>

	<STYLE TYPE="text/css">
    	body
    	{
        background: silver url(".\images\image.jpg") no-repeat fixed center center;
    	}
    	</STYLE>

	</HEAD>

	<BODY>

		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>
		<P>Here</P>
		<P>is</P>
		<P>the</P>
		<P>background</P>
		<P>image</P>
		<P>test</P>

	</BODY>

</HTML>

And it still does not display the background image in Firefox, but it does in IE (this is the complete code; I edit it in notepad and save it as a .html file). I am using version 6.0.2800.1106 of IE and version 1.5 of Firefox.

Anyone got any thoughts? Attached is the image I used for this example.

**penagate** · Feb 7th, 2006, 10:58 PM

Sorry for the delay.

It is because you used back slashes instead of forward slashes in the relative path. Web paths only use forward slashes. Windows, and hence IE, recognises backslashes, but Firefox does not.

Also, try to get out of the habit of using capital tag names. While they are legal in case-insensitive HTML, they are not in case-sensitive XML and XHTML, which is the future...

**southadc** · Feb 14th, 2006, 09:06 PM

Originally Posted by penagate

Sorry for the delay.

It is because you used back slashes instead of forward slashes in the relative path. Web paths only use forward slashes. Windows, and hence IE, recognises backslashes, but Firefox does not.

Also, try to get out of the habit of using capital tag names. While they are legal in case-insensitive HTML, they are not in case-sensitive XML and XHTML, which is the future...

No worries, thanks for getting back to me...

good spot, I got it working now that I have changed the backslashes to forward slashes. It's amazing how such frustrating problems can come down to something so simple

Thread: preventing tiling of background image

Thread Tools

Display

preventing tiling of background image

Re: preventing tiling of background image

Re: preventing tiling of background image

Re: preventing tiling of background image

Re: preventing tiling of background image

Re: preventing tiling of background image

Re: preventing tiling of background image

Re: preventing tiling of background image

Posting Permissions