Cascading Style Sheet?

[angelsandair]

I wanna make a personal background for my squadron's website.

I have a pic I wanna use, just dont know how to do it really.

Website: http://40thfs.spruz.com


Is there a way for someone else to do it for me? If so, if I posted up the pic, could you do it?

Edit: here's the image.

[angelsandair]

Here is what it would say about the default one. Should I just like replace a link or something?


@import url("http://www.spruz.com/user/51956/gallery/overlay/spiral/black/style.css");
/*<agl.folder "Top">*/
   #banner-ad { display: none; }
   #page-header-custom { color: #181E1B; background-color: #333333; background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Backgrounds/War/War-Trauma.jpg); background-repeat: repeat; text-align: center; position: static; width: 100%; height: 137px; margin: 0; }
   #login-area-custom-outer { display: block; position: relative; z-index: 900; height: 20px; }
   #login-area-custom { background-image: none; position: absolute; top: 0px; left: 0; width: auto; height: 20px; z-index: 900; margin: 0; padding: 0 80px 0 20px;  }
   #page-header { color: #181E1B; background-color: #333333; background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Backgrounds/War/War-Trauma.jpg); background-repeat: repeat; text-align: center; position: static; width: 100%; height: 137px; margin: 0; }
   #page-header h1 { font-size: 43px; font-family: lucida sans; text-align: center; position: absolute; top: 2px; left: 28px; display: block; width: auto; z-index: 40; margin: 0; }
   #header-graphic1 { position: absolute; top: 0; left: 0; width: 100%; height: 137px; z-index: 5; overflow: hidden; display: none;}
   #header-graphic2 { position: absolute; z-index: 5; top: 0; right: 0; width: 100%; height: 137px; overflow: hidden; display: http://premiumthemes.csmsites.com/user/57535/gallery/Images/COD/war-trauma.png; }
   #header-graphic1 span { background-image: url(none); background-repeat: no-repeat; background-position: left top; position: absolute; top: 0; left: 0; width: 200; height: 155; z-index: 5; }
   #header-graphic2 span { background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Images/COD/war-trauma.png); background-repeat: no-repeat; background-position: right top; position: absolute; z-index: 5; top: 0; right: 0; width: 261px; height: 150px; }
   #login-area { background-image: none; position: absolute; top: 105px; left: 0; width: auto; height: 20px; z-index: 900; margin: 0; padding: 0 20px 0 20px; }
   .login-text td { color: #7F7F7F; background-color: transparent; }
   .login-text td a { color: #9E9E9E; }
   .login-text td a:hover { color: #FFFFFF; }
/*</agl.folder>*/
/*<agl.folder "Global">*/
   a { color: #7F7F7F; }
   a:hover { color: #333333; }
   td, th { font-size: 10pt; font-family: lucida sans; }
   p { }
   body { color: #FFFFFF; font-size: 10pt; font-family: lucida sans; background-color: #202831; background-image: url(none); text-align: center; width: 100%; height: 100%; padding: 30px 0 10px; }
   #master-table-container {  }
   #master-table { width: 100%; margin: 0; padding: 0; }
/**/   #container { background-color: #181013; background-image: url(none); vertical-align: top; position: relative; width: 71%; margin: 0 auto; border: solid 0 #fff; }
/*</agl.folder>*/
/*<agl.folder "Sides">*/
/**/   .side-nav-table { width: 100%; padding: 2px; }
/**/   .side-nav-box td.header { color: #5A5A5A; font-size: 10pt; font-family: lucida sans; font-weight: bold; font-variant: normal; line-height: 27px; background-color: transparent; background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Backgrounds/Component/Dark/edge.jpg); background-repeat: repeat; text-transform: capitalize; text-align: center; letter-spacing: 2px; bottom: 0; padding: 0 2px 0; }
   .side-nav-box tr.header-row td { background-color: #000000; }
/**/   .side-nav-box td.content li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 1px solid transparent; border-right: 1px solid transparent; border-top: 1px solid transparent; border-bottom: 1px solid transparent; background-color: transparent; color: #000000; text-decoration: none; width: 100%; }
   .side-nav-box td.content { text-align: left; padding-top: 3px; padding-left: 0; color: #4F4F4F; background-color: transparent; background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Backgrounds/Dark/diaglines.jpg); }
   .side-nav-box td.content td.content { color: #4F4F4F; background-color: transparent; background-image: none; }
   html>body .side-nav-box td.content li a { width: auto; }
   .side-nav-box td.content li a:hover { border-left: 1px solid #191919; border-right: 1px solid #000000; border-top: 1px solid #191919; border-bottom: 1px solid #000000; background-color: #000000; color: #9E9E9E; }
   .side-nav-box { padding: 0; font-family: lucida sans; color: #333; }
   .side-nav-box li { border-bottom: 1px solid black; margin: 0; }
   .side-nav-box ul { list-style: none outside; margin: 0; padding: 0; border: none; }
/**/   #nav-cell { width: 1%; padding: 10px 0; background-color: transparent; }
/**/   #ads-cell { width: 1%; padding: 10px 0; background-color: transparent; }
   #nav-links { height:auto; margin: 0; display: inline; }
   #ads-apps { width:auto; height:auto; margin: 0; display: inline; }
   .nav-spacer {width: 145px; height: 1px; margin: 0; padding: 0; overflow: hidden;}
/*</agl.folder>*/
/*<agl.folder "Content">*/
   .content-table { width: 100%; border:0px solid #3366FF; color: #9E9E9E; background-color: transparent; }
   .content-innertable {  }
   .content-cell-inner { color: #9E9E9E; }
   #content-cell-inner { color: #9E9E9E; }
   #content-cell { padding: 10px;}
   #content-container { margin: 20px 0 0; padding-right: 10px; padding-left: 10px; }
   #content-section {  }
   input, textbox, select, textarea {  }
   td.tableheader { text-align: left; height: 24px; }
   td.cell {  }
   #content-cell td.header-cell { font-weight: bold; color: #FFFFFF; background-color: transparent; background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Backgrounds/Component/Dark/spiral.gif);  }
   #content-cell td.header-cell h3 { font-size: 16pt; line-height: 100%; margin: 0; }
   td.header { color: #ffffff; text-align: left; background-color: #09122f; padding: 3px 5px; }
/*</agl.folder>*/
/*<agl.folder "Bottom">*/
   #page-footer-custom { color: #FFFFFF; font-size: 10pt; font-family: lucida sans; font-weight: bold; background-color: #000000; background-image: url(none); background-repeat: repeat; background-position: right bottom; text-align: center; position: relative; width: 100%; height: 47px; clear: both; margin: 0 0 0; }
   #page-footer { color: #FFFFFF; font-size: 10pt; font-family: lucida sans; font-weight: bold; background-color: #000000; background-image: url(none); background-repeat: repeat; background-position: right bottom; text-align: center; position: relative; width: 100%; height: 47px; clear: both; margin: 0 0 0; }
   #page-footer h5 { font-size: 10pt; text-align: center; position: absolute; top: 30px; left: 0; width: 100%; height: 47px; margin: 0; }
   #page-bottom { margin-top: 50px; }
/*</agl.folder>*/
/*<agl.folder "Elements">*/
   .element-container { background-color: transparent; width: 100%; border-width: 0; }
   .element-header { font-weight: bold; color: #FFFFFF; background-color: transparent; background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Backgrounds/Component/Dark/spiral.gif); }
   .element-header-inner { font-weight: bold; color: #FFFFFF; }
   .element-header a { color: #FFFFFF; }
   .element-header-inner a { color: #FFFFFF; }
   .element-row1-inner { color: #000000; }
   .element-row2-inner { color: #000000; }
   .element-row1 { color: #000000; background-color: #5A5A5A; }
   .element-row2 { color: #000000; background-color: #4F4F4F; }
   #container .element-header { font-weight: bold; color: #FFFFFF; background-color: transparent; background-image: url(http://premiumthemes.csmsites.com/user/57535/gallery/Backgrounds/Component/Dark/spiral.gif); }
   #container .element-header-inner { font-weight: bold; color: #FFFFFF; }
   #container .element-header a { color: #FFFFFF; }
   #container .element-header-inner a { color: #FFFFFF; }
   #container .element-row1-inner { color: #000000; }
   #container .element-row2-inner { color: #000000; }
   #container .element-row1 { color: #000000; background-color: #5A5A5A; }
   #container .element-row2 { color: #000000; background-color: #4F4F4F; }
/*</agl.folder>*/

[angelsandair]

So... Nothing? 

[The Fugitive]

I don't see why you want it, your covering it with all the other frames/boxes.  AT the 39ths site http://39thfs.bravehost.com/index2.html I have almost the same kind of set-up. What I did was to make the background picture (palm trees and 38 silhouettes) a non-repeating picture and force it to center. Then the frames/boxes layer over it. The background is set in the css file.

What are you trying to do? 

[angelsandair]

I don't see why you want it, your covering it with all the other frames/boxes.  AT the 39ths site http://39thfs.bravehost.com/index2.html I have almost the same kind of set-up. What I did was to make the background picture (palm trees and 38 silhouettes) a non-repeating picture and force it to center. Then the frames/boxes layer over it. The background is set in the css file.

What are you trying to do? 

Well, I sorta fixed it, but I'm lookin for something KINDA like that, but with a jug or a P-39.

Do you know how to keep the thing from being non-repeating? I'll look off of the 39thfs website if thats okay as like a way to look off from what I'm trying to get.

[The Fugitive]

Its the css file you have to edit. The "view source" is only going to show you the html code for the page.

For my background I have this to set my background image.

body {
   margin: 0;
   padding: 0;
   background: #000000 url(images/image1.jpg) no-repeat center top;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #E6D4D6;
}

The red line sets the background. #000000 is the black color background, URL calls the image from the location I have saved it in, and the no-repeat part places it once, and locks it in the center. 

In the old days you could get by by making your background picture the same size as the basic resolution everyone used (800x600) but with todays wide screen resolutions it takes a bit more to keep thinks in line.

[angelsandair]

Its the css file you have to edit. The "view source" is only going to show you the html code for the page.

For my background I have this to set my background image.

body {
   margin: 0;
   padding: 0;
   background: #000000 url(images/image1.jpg) no-repeat center top;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   color: #E6D4D6;
}

The red line sets the background. #000000 is the black color background, URL calls the image from the location I have saved it in, and the no-repeat part places it once, and locks it in the center. 

In the old days you could get by by making your background picture the same size as the basic resolution everyone used (800x600) but with todays wide screen resolutions it takes a bit more to keep thinks in line.

So, if I were to copy this onto mine, but with a different image, would it work? Or do I still have to add everything else?

[The Fugitive]

You would put this

body {
   background: #000000 url(images/image1.jpg) no-repeat center top;
}

on your css page. If you already have the "body" header on yours, all you need is the background line, or to edit the background line on yours. The color code you might want to change (#000000 is black, you might not want a black background), the the location of your picture.

Remember, this will center your picture, and most likely hide it behind your boxes.

[Dragon]

Angelsandair,FYI, the link to your website under your avatar doesn't work, it contains an extra http