[56K warn] Two backgrounds, one repeated and one fixed?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
summerbum
Forum Newbie
Posts: 12
Joined: Tue Feb 26, 2008 7:49 pm
Location: The Valley, Canada

[56K warn] Two backgrounds, one repeated and one fixed?

Post by summerbum »

Im trying to make a page where one background Image repeats under the other background Image .
Im using tables... so I cant paste it into the table. I want it to be at the ultimate top and ultimate left, but I have no idea how. I was up all last night looking for a forum, or a tutorial somewhere but no luck...

Ideas?
Last edited by pickle on Fri Feb 29, 2008 11:07 am, edited 1 time in total.
Reason: Adding dial-up warning to subject line.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Two backgrounds, one repeated and one fixed?

Post by Zoxive »

Show us your current html.
summerbum wrote:Ideas?
Use Style Sheets.
User avatar
summerbum
Forum Newbie
Posts: 12
Joined: Tue Feb 26, 2008 7:49 pm
Location: The Valley, Canada

Re: Two backgrounds, one repeated and one fixed?

Post by summerbum »

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style type="text/css" media="screen">
body {
background-color:#FFFFFF;
background-image: url(http://i230.photobucket.com/albums/ee12 ... ground.gif);
background-repeat: repeat;

}
</style>

<style type="text/css" media="screen">
body {
background-color:#FFFFFF;
background-image: url(http://i230.photobucket.com/albums/ee12 ... wh3ad7.gif);
background-repeat: no-repeat;
background-position: left top;
}
</style>


<body background="http://i230.photobucket.com/albums/ee12 ... ground.gif">
<table width="960" height="1321" border="0">
<tr>
<td width="5%" height="205">&nbsp;</td>
<td width="23%">&nbsp;</td>
<td width="8%">&nbsp;</td>
<td width="63%">&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td rowspan="4">&nbsp;</td>
<td height="42">&nbsp;</td>
<td rowspan="4">&nbsp;</td>
<td>&nbsp; </td>
<td rowspan="3">&nbsp;</td>
</tr>
<tr>
<td height="152" rowspan="2"> <p><strong>Home</strong><br>
About this crazy place<br>
Add us on myspace :)<br>
Contact info<br>
Donate<br>
Leave a msg<br>
Promote us!<br>
Apply for Affiliate<br>
<br>
<strong>Photoshop </strong><br>
Brushes (.abr)<br>
Brushes (.jpeg)<br>
Button Bases<br>
Button Templates (88x31)<br>
Extended Network (bases)<br>
Icon Bases<br>
Icon Templates (100x100)<br>
Textures<br>
Photographs<br>
<br>
<strong>Graphics and Cake </strong><br>
Backgrounds<br>
Blinkies<br>
Decorations<br>
Dividers<br>
Glitter (words)<br>
Glitter (images)<br>
Myspace Picture Captions<br>
Pixels<br>
CAKE!<br>
<br>
<strong>Signs and Banners </strong><br>
404<br>
About me<br>
Closed<br>
Copyright<br>
Enter<br>
Extended Network<br>
Goodluck<br>
HBD<br>
Hey Smelly<br>
Hiatus<br>
I <3 you<br>
Moved<br>
Revamping<br>
Welcome<br>
Banner (bases)<br>
<br>
<strong>Tutorials and stuff </strong><br>
How to&#8217;s<br>
Html codes<br>
Photoshop<br>
Symbols<br>
Myspace Tips<br>
Misc.<br>
<br>
</p></td>
<td><img src="http://i230.photobucket.com/albums/ee12 ... 2.gif"><br>
<br>
Hellooo<br>
Just a test<br>
Test test<br>
...mhm... TESt</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Two backgrounds, one repeated and one fixed?

Post by Zoxive »

Code: Select all

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<style type="text/css" media="screen">
body {
  background-image: url(http://i230.photobucket.com/albums/ee12/SummerBumBrittany/MY%20Website/newh3ad7background.gif);
  background-repeat: repeat-y;
  margin:0px;
  padding:0px;
}
 
table {
  background-image: url(http://i230.photobucket.com/albums/ee12/SummerBumBrittany/MY%20Website/newh3ad7.gif);
  background-repeat: no-repeat;
  padding:0px;
  margin:0px;
}
</style>
 
 
<body>
<table width="960" height="1321" border="0">
<tr>
<td width="5%" height="205">&nbsp;</td>
<td width="23%">&nbsp;</td>
<td width="8%">&nbsp;</td>
<td width="63%">&nbsp;</td>
<td width="1%">&nbsp;</td>
</tr>
<tr>
<td rowspan="4">&nbsp;</td>
<td height="42">&nbsp;</td>
<td rowspan="4">&nbsp;</td>
<td>&nbsp; </td>
<td rowspan="3">&nbsp;</td>
</tr>
<tr>
<td height="152" rowspan="2"> <p><strong>Home</strong><br>
About this crazy place<br>
Add us on myspace :)<br>
Contact info<br>
Donate<br>
Leave a msg<br>
Promote us!<br>
Apply for Affiliate<br>
<br>
<strong>Photoshop </strong><br>
Brushes (.abr)<br>
Brushes (.jpeg)<br>
Button Bases<br>
Button Templates (88x31)<br>
Extended Network (bases)<br>
Icon Bases<br>
Icon Templates (100x100)<br>
Textures<br>
Photographs<br>
<br>
<strong>Graphics and Cake </strong><br>
Backgrounds<br>
Blinkies<br>
Decorations<br>
Dividers<br>
Glitter (words)<br>
Glitter (images)<br>
Myspace Picture Captions<br>
Pixels<br>
CAKE!<br>
<br>
<strong>Signs and Banners </strong><br>
404<br>
About me<br>
Closed<br>
Copyright<br>
Enter<br>
Extended Network<br>
Goodluck<br>
HBD<br>
Hey Smelly<br>
Hiatus<br>
I <3 you<br>
Moved<br>
Revamping<br>
Welcome<br>
Banner (bases)<br>
<br>
<strong>Tutorials and stuff </strong><br>
How to&#8217;s<br>
Html codes<br>
Photoshop<br>
Symbols<br>
Myspace Tips<br>
Misc.<br>
<br>
</p></td>
<td><img src="http://i230.photobucket.com/albums/ee12/SummerBumBrittany/MY%20Website/thelastest2.gif"><br>
<br>
Hellooo<br>
Just a test<br>
Test test<br>
...mhm... TESt</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Re: Two backgrounds, one repeated and one fixed?

Post by JayBird »

Moved to Client Side
User avatar
summerbum
Forum Newbie
Posts: 12
Joined: Tue Feb 26, 2008 7:49 pm
Location: The Valley, Canada

Re: Two backgrounds, one repeated and one fixed?

Post by summerbum »

What do you mean Client side?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Two backgrounds, one repeated and one fixed?

Post by matthijs »

He (a moderator) means that this thread has been moved to the client side forum, because it deals with html/css.

About the background images: it's quite simple. You can set a background image on each element. A background image of a child element will overlap the one from it's parent. For example

Code: Select all

 
body {
background:#ddd url(bg-body.gif) 0 0 repeat-x;
// now you have a repeating img for the body
}
#wrapper {
background:#fff url(bg-wrapp.gif) 0 0 no-repeat;
// this will overlap the body one and not repeat
}
etc
 
User avatar
summerbum
Forum Newbie
Posts: 12
Joined: Tue Feb 26, 2008 7:49 pm
Location: The Valley, Canada

Re: Two backgrounds, one repeated and one fixed?

Post by summerbum »

Thanks! But no success...
:( I put it in and the second image wont show up...
http://summerbum.com/tester/

I tried changing the color to white (lol...), but this is how I placed it in my source
<style type="text/css" media="screen">
body {
background:#ddd url(http://i230.photobucket.com/albums/ee12 ... ground.gif) 0 0 repeat-x;
// now you have a repeating img for the body
}
#wrapper {
background:#fff url(http://i230.photobucket.com/albums/ee12 ... wh3ad7.gif) 0 0 no-repeat;
// this will overlap the body one and not repeat
}
</style>
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Two backgrounds, one repeated and one fixed?

Post by matthijs »

couple of things:

1. I don't see a #wrapper div in your html. if it's not in the html, a bg img won't show up ;)
2. Use repeat-y if you want an image to repeat down
3. You forgot the body element
4. Use a valid doctype
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Two backgrounds, one repeated and one fixed?

Post by pickle »

~summerbum: Please use appropriate

Code: Select all

or

Code: Select all

or

Code: Select all

or whatever is necessary when posting your code.  Fortunately ~Zoxive was nice enough to re-post your long code properly, so I don't need to edit that post.  Also, if you're going to display large (filesize-wise) images like in your original post, please put [56K warn] in your subject line so dial-up users know what to expect.  I have modified your original post to reflect this.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Two backgrounds, one repeated and one fixed?

Post by Zoxive »

pickle wrote: Fortunately ~Zoxive was nice enough to re-post your long code properly,
It also works as the op desires. (Just need to change the table width to 1000, it has the width op originally had)

Some more notes though.
  • Fixed width of 1000px is a bad choice, it will be a few pixels off if you where shooting for fitting on 1024 x 768, because of scroll bar.
  • 2000 Called and wants it's tables back.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: [56K warn] Two backgrounds, one repeated and one fixed?

Post by matthijs »

First, I would strongly advice to get yourself a good book on basic HTML and CSS. You have to know at least the basics, otherwise you will keep having trouble. And there are a lot of good tutorials out there: for example, everything on http://css.maxdesign.com.au/. If you study all those carefully you'll learn a lot.

Now to your code. I quickly changed some things. Look at the changes I made. This is your current code I picked from the link you posted

Code: Select all

 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<style type="text/css" media="screen"> 
body {
background:#ddd url(http://i230.photobucket.com/albums/ee12 ... ground.gif) 0 0 repeat-x;
// now you have a repeating img for the body
}
#wrapper {
background:#fff url(http://i230.photobucket.com/albums/ee12 ... wh3ad7.gif) 0 0 no-repeat;
// this will overlap the body one and not repeat
}
</style>
 
<table width="960" height="1354" border="0">
  <tr> 
    <td width="5%" height="205">&nbsp;</td>
    <td width="23%">&nbsp;</td>
    <td width="8%">&nbsp;</td>
    <td width="63%">&nbsp;</td>
    <td width="1%">&nbsp;</td>
  </tr>
  <tr> 
    <td rowspan="4">&nbsp;</td>
    <td height="52">&nbsp;</td>
    <td rowspan="4">&nbsp;</td>
    <td>&nbsp; </td>
    <td rowspan="3">&nbsp;</td>
  </tr>
  <tr> 
    <td height="152" rowspan="2"> <p><strong>Home</strong><br>
        About this crazy place<br>
        Add us on myspace :)<br>
        Contact info<br>
        Donate<br>
        Leave a msg<br>
        Promote us!<br>
        Apply for Affiliate<br>
        <br>
        <strong>Photoshop </strong><br>
        Brushes (.abr)<br>
        Brushes (.jpeg)<br>
        Button Bases<br>
        Button Templates (88x31)<br>
        Extended Network (bases)<br>
        Icon Bases<br>
        Icon Templates (100x100)<br>
        Textures<br>
        Photographs<br>
        <br>
        <strong>Graphics and Cake </strong><br>
        Backgrounds<br>
        Blinkies<br>
        Decorations<br>
        Dividers<br>
        Glitter (words)<br>
        Glitter (images)<br>
        Myspace Picture Captions<br>
        Pixels<br>
        CAKE!<br>
        <br>
        <strong>Signs and Banners </strong><br>
        404<br>
        About me<br>
        Closed<br>
        Copyright<br>
        Enter<br>
        Extended Network<br>
        Goodluck<br>
        HBD<br>
        Hey Smelly<br>
        Hiatus<br>
        I <3 you<br>
        Moved<br>
        Revamping<br>
        Welcome<br>
        Banner (bases)<br>
        <br>
        <strong>Tutorials and stuff </strong><br>
        How to&#8217;s<br>
        Html codes<br>
        Photoshop<br>
        Symbols<br>
        Myspace Tips<br>
        Misc.<br>
        <br>
      </p></td>
    <td><img src="http://i230.photobucket.com/albums/ee12/SummerBumBrittany/MY%20Website/thelastest2.gif"><br> 
      <br>
      Hellooo<br>
      Just a test<br>
      Test test<br>
      ...mhm... TESt</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
 
 
This is the new code

Code: Select all

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="text/css" media="screen"> 
body {
    margin:0;padding:0;
background:#ddd url(http://i230.photobucket.com/albums/ee12 ... ground.gif) 0 0 repeat-y;
/* chaged repeat-x to repeat-y */
}
#wrapper {
background:transparent url(http://i230.photobucket.com/albums/ee12 ... wh3ad7.gif) 0 0 no-repeat;
/* changed bg color */
}
</style>
</head><!-- moved this-->
<body> <!-- added this-->
    
<div id="wrapper"><!-- added this-->
 
<table width="960" height="" border="0">
    <tr> 
        <td width="5%" height="205">&nbsp;</td>
        <td width="23%">&nbsp;</td>
        <td width="8%">&nbsp;</td>
        <td width="63%">&nbsp;</td>
        <td width="1%">&nbsp;</td>
    </tr>
    <tr> 
        <td rowspan="4">&nbsp;</td>
        <td height="52">&nbsp;</td>
        <td rowspan="4">&nbsp;</td>
        <td>&nbsp; </td>
        <td rowspan="3">&nbsp;</td>
    </tr>
    <tr> 
        <td height="" colspan="2"> 
            <p><strong>Home</strong><br>
        About this crazy place<br>
        Add us on myspace :)<br>
        Contact info<br>
        Donate<br>
        Leave a msg<br>
        Promote us!<br>
        Apply for Affiliate<br>
        <br>
        <strong>Photoshop </strong><br>
        Brushes (.abr)<br>
        Brushes (.jpeg)<br>
        Button Bases<br>
        Button Templates (88x31)<br>
        Extended Network (bases)<br>
        Icon Bases<br>
        Icon Templates (100x100)<br>
        Textures<br>
        Photographs<br>
        <br>
        <strong>Graphics and Cake </strong><br>
        Backgrounds<br>
        Blinkies<br>
        Decorations<br>
        Dividers<br>
        Glitter (words)<br>
        Glitter (images)<br>
        Myspace Picture Captions<br>
        Pixels<br>
        CAKE!<br>
        <br>
        <strong>Signs and Banners </strong><br>
        404<br>
        About me<br>
        Closed<br>
        Copyright<br>
        Enter<br>
        Extended Network<br>
        Goodluck<br>
        HBD<br>
        Hey Smelly<br>
        Hiatus<br>
        I <3 you<br>
        Moved<br>
        Revamping<br>
        Welcome<br>
        Banner (bases)<br>
        <br>
        <strong>Tutorials and stuff </strong><br>
        How to&#8217;s<br>
        Html codes<br>
        Photoshop<br>
        Symbols<br>
        Myspace Tips<br>
        Misc.<br>
        <br>
      </p>
    </td>
    <td colspan="3" >
        <img src="http://i230.photobucket.com/albums/ee12/SummerBumBrittany/MY%20Website/thelastest2.gif"><br> 
      <br>
      Hellooo<br>
      Just a test<br>
      Test test<br>
      ...mhm... TESt
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 
</table>
 
</div><!-- added this-->
</body>
</html>
 
 
I also changed some things in the table but you'll have to do the rest yourself. After you've learned a bit about html and css you might even throw away the table.
User avatar
summerbum
Forum Newbie
Posts: 12
Joined: Tue Feb 26, 2008 7:49 pm
Location: The Valley, Canada

Re: [56K warn] Two backgrounds, one repeated and one fixed?

Post by summerbum »

I uploaded the changes and it's still blank. I don't understand!! :( . Why is it this hard!!
Image

When you say that I have the do the rest, what do you mean? Like its not done or anything... im just trying to get the template up. :cry:
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: [56K warn] Two backgrounds, one repeated and one fixed?

Post by matthijs »

I'm 100% sure the code I showed works. Try opening the page locally. Or make sure you refresh and/or empty the cache of your browser. Are you sure uploading works?

What I meant with the rest was the little code improvements. But those are not important for now.
User avatar
summerbum
Forum Newbie
Posts: 12
Joined: Tue Feb 26, 2008 7:49 pm
Location: The Valley, Canada

Re: [56K warn] Two backgrounds, one repeated and one fixed?

Post by summerbum »

I'm positive i'm uploading it right. I mean, everything else and every other page works except for this ones backgrounds.
Is there anything else I can try? Does it have to be css?
Post Reply