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
Printable View
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
Try this:
And Penagate no complaining about inline CSS :PCode:<body style="background: background-image; background-image: url(URL HEREE); background-repeat: no-repeat;">
Cheers,
Ryan Jones
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?Quote:
Originally Posted by southadc
This will give you a centred background image that does not tile:
If you want it to stay there when the page scrolls use this:Code:body
{
background: url('yourimage.jpg') center center no-repeat;
}
Code:background-attachment: fixed;
OK, a better question would be this:
Why does this
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).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">
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.
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. -->
OK, I have tried again using the following:
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.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>
Anyone got any thoughts? Attached is the image I used for this example.
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...Quote:
Originally Posted by penagate
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 :eek2: