set up a nine part background

**scipets2** · 02-11-2010 01:02 PM

Hi, I download a royalty free theme however I can't get it to work properly. I would like the corners to be in the correct corner the sides top and bottom to tile as much as necessary and the middle to be solid colour ehere my content will go, any help?

I have put the images in a zip file if it helps.

NOTE: The code I would prefer to be in HTML, however I will use PHP if necessary

**Zubair** · 02-11-2010 01:07 PM

I will Give it a try.

Post the website URL if you already uploaded it..

**garikr** · 02-11-2010 07:56 PM

This is what I got using your images http://iggi.exofire.net/layoutS/

since i'm gona take it down soon, I'm attaching a zip file

**xgreenberetx** · 02-12-2010 07:18 AM

Nice work garikr

**rkalhans** · 02-12-2010 03:28 PM

seriously nyc work, garikr

**scipets2** · 02-13-2010 02:34 AM

Originally Posted by garikr

This is what I got using your images http://iggi.exofire.net/layoutS/

since i'm gona take it down soon, I'm attaching a zip file

Thanks loads, that background has been bugging me for ages

**scipets2** · 02-18-2010 01:34 AM

Following my last thread, I finally got the background working, however, there is one minor fault with the code. Is there anyway to get the sides and top to fit to the content not to whe windows size, alternatively You could tell me how to fix the background. As I do have some long/ soon-to-be long pages on my site, eg. the homepage.

Thanks

**garikr** · 02-18-2010 07:27 AM

Find the style for the body

Code:

 body{
    background-color:#434142;
    position:absolute;
    width:100%;
    height:100%;
    min-width:640px;
    min-height:480px;
   }

and erase the line height:100%
Basically that line sets the hight of the body to 100% of the hight of the screen (since the body is the child of the screen ). Without it the body will stretch according to how much you'll stuff in there. The reason it was there in the first place was because I didn't have enough content, so the bottom corners would've been in the middle of the screen. Hope that makes sense to you.
Keep on coding.

P.S.
Eventually you should move your styles to the separate file/files so if you have different pages with the same styles you won't have to type them in over and over.
P.S.S.
Try changing min-height to min-height:100% that should set it to the height of the screen or more. I think that should work.
Edit:
In case you don't know how to put styles into separate file:
take everything inside the <style> </style> tags and post it into the new file named "style_main.css"(or whatever you choose to call it). Replace the <style> tags with:

HTML Code:

<link rel="stylesheet" type="text/css" href="design/style_main.css"/>

were "design/style_main.css" is the directory/filename of your stylesheet. This way when you change something you changing it in one place, instead of going to every page.

**scipets2** · 02-18-2010 09:28 AM

I hope I'm not going too far with this, but when I was attempting to access my site on Internet Explorer it showed the corner images however the sides top and bottom were not tiled and the contend overflowed. A IE friendly code addition would be much appreciated

Thanks,

**garikr** · 02-18-2010 02:49 PM

I think I got it to work in IE6. Took some figuring out and some not too proper code. But honestly, I'm surprised it worked at all the way it was. Promise me you are gona look into what I'm about to say... here it goes:
The html structure is

HTML Code:

<html><head></head><body></body></html>

NO presentational stuff goes between <head></head> tags. This is the place for initialization, the things like <meta> tags,<title></title>, scripts and styles go here. nothing that can be displayed on the screen goes into <head>, that stuff goes between the <body> </body> tags. You MUST close all the tags. You CAN'T have <div> without </div>. If you opened the first tag, and then the second you MUST close the second one before the first.<div><span></span></div> and not <div><span></div></span>. Tags like <br/>, <img src="aaa"/> and such, MUST have / before the >. You should find out about code validation. Some tags, such us <font> are considered obsolete. HTML tags should be used for structure. Things like size, color, position and much more should go into stylesheets. You should read up on all of this. I'm by no means an expert, so if I'm saying something wrong, somebody please correct me.
Keep on coding.

Thread: set up a nine part background

LinkBack

Thread Tools

Display

set up a nine part background

Re: set up a nine part background

Re: set up a nine part background

Re: set up a nine part background

Re: set up a nine part background

Re: set up a nine part background

Re: set up a nine part background

Re: set up a nine part background

Re: set up a nine part background

here it is

Similar Threads

[OFF] [100 points] Joomla template porting

html/css background issue

Background Checks Safety First - Free and Paid Background check

can anyone convert a CSS into an IPB skin for me?

My web designe

Posting Permissions