How to put a custom background in this page?

[leverhelven]

Ohai there! So, I'm pretty much an html noob, but I have to complete this application petpage in order to get accepted in a guild. I can customize it. Thing is, I don't know how to!

 

So, how can I put this tile background into this code?

 

 

 

 

<style>

body {

background: #F8F8F8;

font: 10px Tahoma;

color: black;

font-weight: lighter;

line-height: 13px;

text-align: justify;

}

#top {

background: #F8F8F8;

width: 100%;

height: 20px;

top: 0px;

left: 0px;

}

#username {

font: 20px Monospace;

color: black;

text-transform: uppercase;

top: 10px;

left: 80px;

z-index: 80;

}

#small_box {

background: #F0F0F0;

width: 555px;

height: 50px;

top: 30px;

left: 250px;

color: #666;

font: 9px Monospace;

text-transform: uppercase;

padding: 3px;

overflow: hidden;

}

#smalls {

width: 554px;

height: 50px;

margin-bottom: 5px;

}

#box {

width: 540px;

height: 370px;

background: white;

top: 90px;

left: 250px;

padding: 8px;

overflow: hidden;

}

.page {

height: 100%;

overflow: auto;

padding: 8px 8px;

}

#links {

width: 560px;

height: 30px;

left: 250px;

top: 490px;

background: #E0E0E0;

text-align: center;

}

#side {

top: 30px;

left: 20px;

height: 475px;

width: 200px;

overflow: auto;

padding: 10px;

background: white;

color: black;

font-weight: normal;

line-height: 12px;

font: 9px Verdana;

}

#side b {

font: 10px Verdana;

color: #585858;

font-weight: bold;

}

#logo {

height: auto;

width: 92px;

float: left;

text-align: center;

margin-bottom: 3px;

margin-left: 3px;

}

#pic {

width: 790px;

height: 130px;

overflow: hidden;

border: 2px solid #E0E0E0;

top: 540px;

left: 20px;

background: white;

}

div.table {

width: 30%;

float: left;

overflow: hidden;

text-align: left;

color: black;

font-size: 9px;

height: 50px;

padding: 3px;

margin: 3px 3px;

border: 1px dashed #A0A0A0;

}

div.table img {

width: 50px;

height: 50px;

border: none;

float: left;

}

h1 {

font: small-caps 16px Tahoma;

color: #606060;

background: #F8F8F8;

text-align: left;

font-weight: normal;

margin-bottom: 5px;

}

h2 {

color: #333;

font: 15px Tahoma;

letter-spacing: -1px;

text-align: left;

margin-bottom: 0px;

background: #F8F8F8;

}

a:link, a:visited {

text-decoration: underline;

font-weight: normal;

color: #333;

cursor: crosshair;

}

a:hover {

color: white;

}

a.nav:link, a.nav:visited, a.nav:active {

font: 12px Monospace;

margin: 8px;

color: black;

text-decoration: none;

text-align: center;

font-weight: normal;

text-transform: uppercase;

background: #E8E8E8;

letter-spacing: 3px;

padding: 4px;

width: 190px;

}

a.nav:hover {

color: white;

background: none;

}

.sf {

display: none;

}

b {

color: #888888;

font-weight: bold;

}

</style>

<div id="username" style="position: absolute;">YOURUSERNAME HERE</div>

<div id="small_box" style="position: absolute;">

<div id="smalls">THE MASTERMINDS ARE RENOWNED FOR THEIR INTELLIGENCE, WEALTH AND PRESTIGE TROPHIES. WHETHER THESE TROPHIES BE GAME TROPHIES, OR PET TROPHIES, THE MASTERMINDS PRIDE THEMSELVES ON ACCOMPLISHMENTS OF THIS FORM. MASTERMINDS ALSO TAKE GREAT PRIDE IN THEIR ABILITY TO INVEST THEIR NEOPOINTS WISELY - YOU'LL FIND A LOT OF MASTERMINDS INTERESTED IN THE STOCK MARKET, OR INVOLVED IN RESELLING/ RESTOCKING. <a href="#more">Learn more..</a>

</div>

<div id="smalls">

<a name="more"></a>THE MASTERMINDS ARE ONE OF THE FACTIONS WITHIN COVERT. THE INNER WORKINGS OF OUR SOCIETY REMAIN HIDDEN FROM THE GENERAL PUBLIC, BUT IF YOU ARE INTERESTED IN JOINING US, WE SUGGEST YOU START BY FOLLOWING OUR LEADER, <a href="/~MUSKET">VORACK</a>.<br><br><center>

Made for members of Covert only. Do not re-distribute || Coding: KYLA (L0NE_W0LF_0) || House: AMY (amy1992192) </center> </div>

</div>

<div id="pic" style="position: absolute;"><img src="http://i.imgur.com/AFBuZmY.png"></div>

<div id="top" style="position: absolute;"></div>

<div id="links" style="position: absolute;">

<br><a href="#about" class="nav">About</a>

<a href="#two" class="nav">Trophies</a>

<a href="#three" class="nav">Books</a>

<a href="#four" class="nav">Investments</a>

<a href="#submissions" class="nav">Submissions</a>

</div>

<div id="side" style="position: absolute;">

<div id="logo">

<img src="http://i.imgur.com/hGI4TK5.jpg"><br><b>Recruit</b>

</div>

<div id="logo">

<img src="http://i219.photobucket.com/albums/cc293/Bethandwhy/ScientistChibi.png" style="width: 45px;"><br><i>Mastermind</i>

</div>

<p>

</p>

<h2>The Basics</h2>

<b>Name</b>: Patty <br><b>Age</b>: 23 <br><b>Timezone</b>: GTM: - 3:00 <br><b>Main Account</b>: policialmagaly

<p>

</p>

<h2>Guild involvement</h2>

<b>Member since</b>: 00/00/00<br><b>Faction</b>: Masterminds<br><b>Rank</b>: Recruit<br><b>Gems collected</b>: 00

<p>

</p>

<h2>Interests</h2>

<b>On Neo</b>: blueberries and Cybunnies :3<br><b>Outside hobbies/interests</b>: books, The Simpsons, purple

<p>

</p>

</div>

<div id="box" style="position: absolute;">

<a name="about"></a>

<div class="page">

<h1>Introduction</h1>

Ohai guys! I'm Patty, I'm from Rio de Janeiro and I've been on Neopets for almost 12 years now. I'm graduating in History and just recently enrolled in Psychology University.

<br><br>

My main Neo-passion is Cybunnies. I've loved them from the very first time I set my eyes on them - and that was nearly 12 years ago! I'm trying to have as many different-coloured Cybunnies as possible, while at the same time keeping them all beautifully customized and well-cared. :)

<br><br>

Outside of Neopets, I'm a Simpson Fanatic and animal lover. My cat Emily is the apple of my eye :3 I also love everything purple, though right now I'm going through a shades-of-blue phase.

<p>

</p>

<h1>Goals and Achievements</h1>

<div class="table">

<img src="https://images.neopets.com/items/paintbrush_water.gif"><br>

Save up for Water PB

</div>

<div class="table">

<img src="https://images.neopets.com/items/paintbrush_royal.gif"><br>

Save up for Royal PB

</div>

<div class="table">

<img src="https://images.neopets.com/items/toy_poogle_mspp.gif"><br>

Get 300 avatars (4 to go!)

</div>

<div class="table">

<img src="https://images.neopets.com/items/jel_blueberry_whole.gif"><br>

Improve my gallery

</div>

<div class="table">

<img src="https://images.neopets.com/items/codestone14.gif"><br>

Train Princesadosmares to level 250

</div>

<div class="table">

<img src="https://images.neopets.com/items/boo_royalscorchio_boybook.gif"><br>

Get Principedaneve the Neopian Book Award

</div>

</div>

<a name="two"></a>

<div class="page">

<h1>Trophies</h1>

Trophies I wish to win!<br><br><div class="table">

<img src="https://images.neopets.com/games/trophies/trophy_books_read_1.gif"><br><b>Neopian Book Award</b><br><i>???</i>

</div>

<div class="table">

<img src="https://images.neopets.com/games/pages/trophies/619_1.png"><br><b>Gold Jubble Bubble Trophy</b><br><i>currently Silver</i>

</div>

<div class="table">

<img src="https://images.neopets.com/games/pages/trophies/100_1.png"><br><b>Caption Contest Trophy</b><br><i>need some ideas...</i>

</div>

</div>

<a name="three"></a>

<div class="page">

<h1>Intelligence</h1>

You can list the intelligence goal for your pet, or list the books you still need to buy to increase your total books read. <br><br><div class="table">

<img src="https://images.neopets.com/items/book_mynci3.gif"><br><b>Book name</b><br><i>est. price</i>

</div>

<div class="table">

<img src="https://images.neopets.com/items/book_mynci3.gif"><br><b>Book name</b><br><i>est. price</i>

</div>

<div class="table">

<img src="https://images.neopets.com/items/book_mynci3.gif"><br><b>Book name</b><br><i>est. price</i>

</div>

<div class="table">

<img src="https://images.neopets.com/items/book_mynci3.gif"><br><b>Book name</b><br><i>est. price</i>

</div>

<div class="table">

<img src="https://images.neopets.com/items/book_mynci3.gif"><br><b>Book name</b><br><i>est. price</i>

</div>

<div class="table">

<img src="https://images.neopets.com/items/book_mynci3.gif"><br><b>Book name</b><br><i>est. price</i>

</div>

</div>

<a name="four"></a>

<div class="page">

<h1>Investments</h1>

Are you investing in the stock market? Do you keep track of your awesome restocks? Or, do you have goals for reselling?

</div>

<a name="submissions"></a>

<div class="page">

<h1>Guild Submissions</h1>

You can leave this blank until you start submitting art/ graphics to the guild.

</div>

</div>

 

 

 

Sorry if there's an easier way to post codes, I really don't know any.

 

Also, can you guys also help me change the font and font colors? Thank you SO much! :oneeyed01:

This topic has been edited by a member of staff (Anime).
The topic was posted in the wrong area.
Please check your user inbox to see if you have been contacted regarding this topic.
Per the reason above, this topic has been MOVED from Graphics Help to Computers & Programming.

[emily_speck_15]

Yes... This is just a rambling post of some html notes I have.

Let's add an image

<img src="put pic url herel" />.

 

<a> tag is the one used to make hyperlinks

<a href="put website url here>What text you want hyperlinked</a>

 

<p style="font-size: 12px"> \\Changes Font size

<h2 style="color:red"> \\Changes Font Color

<h2 style="color: green; font-size:12px"> \\Changes Both

 

http://www.w3.org/TR/css3-color/#svg-color LIST OF COLORS

http://www.w3.org/TR/CSS21/fonts.html#generic-font-families LIST OF FONTS

 

 

<em> for italized

<strong> for bold

 

So for you <body background="http://imageshack.com/a/img59/268/zzqt.png"> would probably work... I honestly have only coded a tiled background once so I may be wrong... Let me know how it works out!!

[leverhelven]

Nope, it didn't work :( Anyone else can help me?

[Mouseykins]

In your style tags try this:

body {
background: url("URLHERE");
background: #F8F8F8;
font: 10px Tahoma;
color: black;
font-weight: lighter;
line-height: 13px;
text-align: justify;
}

just replace URLHERE with your image url and it should show up just like a tiled background. If this doesn't work it might help me if I could actually see the page, so if you could link to it that would help. I hope this works though! :)

[leverhelven]

Oh my! It's still not working! :( This is the page: http://www.neopets.com/~Arthemiz

[Mouseykins]

Try this:

body {
background: url("http://imageshack.com/a/img59/268/zzqt.png");
	background-color: #F8F8F8;
	font: 10px Tahoma;
	color: black;
	font-weight: lighter;
	line-height: 13px;
	text-align: justify;
}

Copy and paste that into your code replacing the part that's there and it should work for you. Using your page's source code I checked it on one of my petpages and I did get it to work. :)

 

Oh and to post code properly like I have been doing, all you do is click the blue < > button beside the add image button and then paste your code. The way you did it messed up your image links making them throw up error messages when I copied it onto one of my pages.

 

You were asking about fonts and font colors earlier. If you still need help with this I'd suggest taking a look at this site. It's very helpful and one of my #1 resources for coding questions. http://www.w3schools.com/ If you still need help after checking out that site I can try and help or someone else might be able too. :)

[leverhelven]

Oh, wow, thank you SO much! It finally worked! :happydance:

 

I'm gonna read the page you suggested, thank you very much!

[Mouseykins]

I'm glad I was able to help you get it to work! I just linked you to the main page on the site, you'll probably want to take a look at the HTML and CSS sections. :)