Simple Machines Community Forum

General Community => Scripting Help => Aiheen aloitti: tezej24 - helmikuu 27, 2007, 04:56:18 AP

Otsikko: How to change BODYSTYLE - from color to picture?
Kirjoitti: tezej24 - helmikuu 27, 2007, 04:56:18 AP
I have found some  :D cool guestbook and i would like to change guestbook background if this is possible.

This is BODYSTYLE line:
margin: 0px;padding: 0px;background-color: #000000

I want to replace black background with some picture that is located here:
h**p://something.com/picture.jpg

How to do this?

I would also like that this picture would fit 100 % in my guestbook. Example i would like that the whole picture (100%) would be visible in 800X600, 1024X768,... resolution. If this isn't possible then i would like that my picture would be always centered with black background.



Otsikko: Re: How to change BODYSTYLE - from color to picture?
Kirjoitti: fallen_angel - helmikuu 27, 2007, 04:34:45 IP
background-image: url(http://something.com/picture.jpg); background-position: center;

It's practically impossible to resize images for different screen resolutions without pulling them out of shape - unless it's a tiling image. Your best bet is to centre it.
Otsikko: Re: How to change BODYSTYLE - from color to picture?
Kirjoitti: tezej24 - helmikuu 27, 2007, 05:11:03 IP
Thank you for reply.  :)

Lainaus käyttäjältä: fallen_angel - helmikuu 27, 2007, 04:34:45 IP
It's practically impossible to resize images for different screen resolutions without pulling them out of shape - unless it's a tiling image.

Yes i know this but i would still like to entlarge my picture. Can you help me please.

I have found tutorial how to do this but i dont know what exactly must i write in my guestbook BODYSTYLE.

Here is the link:
http://www.htmlite.com/faq022.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>

<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>