never forget

top partners | Youtube Backgrounds | Dark Graphics | Dark Graphics | pixel2life | Youtube Backgrounds

myspaceprodesigns.com

div overlay tutorial

  • bookmark us
  • add me on myspace
  • add me on xuqa
  • add me on yfly

menu

Your Ad Here

friends

Your Ad Here

layouts

Paint Div Layout by Chadd

Paint Div Layout

author: Chadd

Your Ad Here

new stuff

hot stuff

sponsors

Your Ad Here
xoospace.compimper.orgpyzam.combigoo.ws

css background image

•  Introduction  •  Preparation  •  Hide Everything  •  Your First Layer  •  Add Picture  •  Add Contact Links  •  Understanding Overflow  •  Background Images  •  Z-Index  •  Div Overlay Generator  •

Common Question:

I know how to make different colors for my backgrounds, but what about pictures?

Common Answer:

It's easy.  Just read below.

Let's make another layer with a background picture in this round so you can see how to do it.  For this, we add the background-image property.  Really easy stuff.  We'll also make this background image repeat and position it to repeat emanating from the center.  I'm a big fan of music, so we'll make this our music section and position our layer on the right side of the page.  We'll use a simple graphic I made for this tutorial as the background image.

Let's create our layer:

.music {
background-image:url('http://c.myspace.com/Groups/00009/65/69/9129656_l.gif');
background-repeat:repeat;
background-position:center;
border:3px ridge white;
font-size:8pt;
font-weight:bold;
color:white;
padding: 18px;
position:absolute;
left:50%;
margin-left:170px;
top:205px;
z-index:2;
width:180px;
height:500px;
}

Then, I will assume you know where this goes by now:

<div class="music">What can I say, I'm a big fan of music.  I love to rock the night away.  I have about 600 CD's and around 10 Gb of music on my computer.  I love going to concerts and am very involved in the local music scene.  I love rock, rap, r&b, metal...pretty much everything but country because I really don't want to hear some dude crying about losing his trailor, his cheating wife, and his cat.  Men aren't supposed to like cats, even though I love them...I hope that doesn't make me gay or anything.</div>

Oh, and another note (in case you haven't figured it out by now) is to watch your spelling and to make sure you don't leave any semicolons out.  It will cause some serious problems, as I discovered when I entered this code the first time because i had misspelled "height."  I'm such an amateur and I never won the spelling bee.  The word "trout" eliminated me in the third grade...what a shame.  I guess being a champion of the people just isn't in my destiny.

Anyway, here is what your profile should look like now (click to enlarge):

Step 7

One last thing...Understanding Z-Index

Comments

View Comments (1) •  Leave Comment  •  Support Forum