Ok Background Help Please

~Dave

Mar 3 2007, 03:24 AM

OK so i've given up on the paint for background now how would i get it to look like this
http://img.photobucket.com/albums/v614/Dj1.../background.jpg
without using paint and without it coming out to look like this...
http://img.photobucket.com/albums/v614/Dj169211/Damn.jpg

like, with just html code, not trying to use paint and do the <body background="sdflsa.gif"> BS any ideas?

Comment/Reply (w/o sign-up)

biscuitrat

Mar 3 2007, 03:49 AM

I'm going to introduce you to something called CSS. In a basic HTML page, find the following tags:

CODE

[b]<head> </head>[/b]

In between them, write the following:

CODE

Now, your entire body will have this background image, and it will repeat down the y-axis...that is, up and down. The color code in front of it makes sure that any part of the background that isn't covered by the background image will be that color...in this case, the color is black, because that is the predominant color of your page.

This is a FAR better way to integrate a design. I strongly encourage you to start learning CSS; it'll change the way you look at things so much, and it's so easy

Comment/Reply (w/o sign-up)

jlhaslip

Mar 3 2007, 04:05 AM

Like this?

Cut and paste this code into a file and name it whatever.html, then open it in your browser. Easy as pie...

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>
            An XHTML 1.0 Strict template
        </title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta http-equiv="content-style-type" content="text/css" />
        <meta http-equiv="expires" content="Mon, 01 Jan 1995 00:01:01 CST" />
        <meta http-equiv="keywords" content="keywords list here, comma seperated" />

        <meta http-equiv="description" content="insert a description here." />
        <meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" />
        <meta http-equiv="author" content="Jim Haslip" />
        <meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" />
        <link rel="stylesheet" type="text/css" href="style_file_here.css" />
<style type="text/css">
/*<![CDATA[*/
* html { margin:0; padding:0;}
html, body {
height: 100%;
}
#wrapper { /* div you want to stretch */
min-height: 100%;
}
body { margin:0 auto; text-align:center; background-color: #000000; }



#wrapper { margin: 0 auto; width:100%; background-color: transparent; }
#wrapper_top { margin: 0 auto; width:100%; height: 150px; background-color: transparent; border-bottom: 3px solid #000080;
			 position:absolute; top: 0; left: 150px;}
#wrapper_left{ margin: 0 auto; width:150px;  height: 100%; background-color: transparent; border-right: 3px solid #000080;
			 position:absolute; top:0; left: 0;}

#header { margin: 1em 0; text-align:center; background-color: transparent; }
p { margin: 1em; padding:1em; text-align:left }
#footer { margin: 1em auto; padding: 1em; text-align:center; }
#footer a { margin: 1em auto; padding: .15em; }
/*]]>*/
</style>
<!--[if lte IE 6]>
<style type="text/css">
#wrapper {
height: 100%;
}
</style>
<![endif]-->
    </head>
    <body>
        <div id="wrapper">
        
        <div id="wrapper_top">&nbsp;</div>
        <div id="wrapper_left">&nbsp;</div>
            <div id="header">

            </div><!-- header -->

            <div id="footer">

            </div><!-- footer -->
        </div><!-- wrapper -->
    </body>
</html>

Comment/Reply (w/o sign-up)

biscuitrat

Mar 3 2007, 04:08 AM

Jhaslip has the right idea; go for a nice semantic XHTML layout (copy the code, don't worry about the terminology) and have a blast

Comment/Reply (w/o sign-up)

Graeme

Jun 29 2007, 05:48 PM

if you are trying to get that layout instead of using a background, try using a CSS Layout.

CSS Layout help can be found on numerous websites, although I like using Lissa Explains.

Comment/Reply (w/o sign-up)

Ok Background Help Please - html

Ok Background Help Please - html