moonlettuce | HTML Question

You're viewing

moonlettuce's journal
Create a Dreamwidth Account Learn More

Reload page in style: site light

If you're putting a background image onto a website, what's the code to make it a fixed image? Because I'm trying to think, but I'm drawing a blank?

ETA: Got it! ::love my friends::

Current Mood: thinky

Threaded | Top-Level Comments Only

From:

greyinthedark.livejournal.com

I believe you just need to insert this text into the body tag: bgproperties="fixed"

It'll still tile, of course, but that should do it. (And now I shall go and give some thought to the fact that I regularly forget my own age, but this I remember right away. Hmm. ;)

From:

katemonkey.livejournal.com

In the CSS file:

body { background: url(image.whatever) fixed; }

From:

temaris.livejournal.com

You do it with css either inline or using a style sheet. Which do you want, because how you put it in and call it are slightly different.

For a style sheet include in the body class

body
  {
      background: url(urltopicture.jpg) white;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 95% 1%;
  }

The variables here are everything after the colons.

background: url(~.jpg) white /* insert the relative or absolute url. Include an alternative background colour or IE 5 and some versions of six will render it as grey */

background-repeat: no-repeat /* this shows the image once. If you want the image to repeat vertically, horizontally, or both, you can put in repeat-x (which does horizontal), or repeat-y (which does vertical), or repeat (which does both) */

Background-attachment: fixed /* this is what allows the image to stay fixed when the page is scrolled. It's the important part. */

background-position: 95% 1%; /* this simply declares where the picture image will be positioned with respect to the browser. the first number is the horizontal positionand the second the vertical position. You can also simply say
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

if you only give one value -- top, center etc, the second value will default to center. In this example, 95% 1% pushes the image to appear in the rightmost corner, with a 5% side margin, and a 1% top margin. Using percentages allows more precise positioning but lets the image move with the user's browser preferences. You can use fixed positions (pixels or em) but those can cause result in horizontal scrolling or loss of image off the edge of the browser page. */

to do the same thing inline, that is, on the webpage itself, same sort of thing, but done:

<body style="background: url(urltopicture.jpg) white;background-repeat: no-repeat;background-attachment: fixed;background-position: 95% 1%;">>

with the variables tweaked as above.