HTML Question
Dec. 3rd, 2005 11:35 pm![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
moonlettuceIf 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::
ETA: Got it! ::love my friends::
![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
no subject
Date: 2005-12-04 12:04 am (UTC)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. ;)
no subject
Date: 2005-12-04 12:24 am (UTC)no subject
Date: 2005-12-04 12:06 am (UTC)body { background: url(image.whatever) fixed; }
no subject
Date: 2005-12-04 12:25 am (UTC)My image moves no longer!
no subject
Date: 2005-12-04 12:13 am (UTC)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.
no subject
Date: 2005-12-04 12:26 am (UTC)