Jump to content
xisto Community
Sign in to follow this  
~Dave

Ok Background Help Please html

Recommended Posts

OK so i've given up on the paint for background now how would i get it to look like this
http://forums.xisto.com/no_longer_exists/404.png
without using paint and without it coming out to look like this...
http://forums.xisto.com/no_longer_exists/404.png

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

Share this post


Link to post
Share on other sites

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

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

In between them, write the following:

<style type="text/css">body {background: #000 url(thelocationofyourfile) repeat-y;}

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 :P

Share this post


Link to post
Share on other sites

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


<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"> </div> <div id="wrapper_left"> </div> <div id="header"> </div><!-- header --> <div id="footer"> </div><!-- footer --> </div><!-- wrapper --> </body></html>


Share this post


Link to post
Share on other sites

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 :P

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.