Page 1 of 2

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

Posted: Thu Feb 28, 2008 3:01 pm
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?

Re: Two backgrounds, one repeated and one fixed?

Posted: Thu Feb 28, 2008 3:27 pm
by Zoxive
Show us your current html.
summerbum wrote:Ideas?
Use Style Sheets.

Re: Two backgrounds, one repeated and one fixed?

Posted: Thu Feb 28, 2008 3:35 pm
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>

Re: Two backgrounds, one repeated and one fixed?

Posted: Thu Feb 28, 2008 3:43 pm
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>

Re: Two backgrounds, one repeated and one fixed?

Posted: Thu Feb 28, 2008 4:05 pm
by JayBird
Moved to Client Side

Re: Two backgrounds, one repeated and one fixed?

Posted: Thu Feb 28, 2008 5:30 pm
by summerbum
What do you mean Client side?

Re: Two backgrounds, one repeated and one fixed?

Posted: Fri Feb 29, 2008 12:05 am
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
 

Re: Two backgrounds, one repeated and one fixed?

Posted: Fri Feb 29, 2008 7:25 am
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>

Re: Two backgrounds, one repeated and one fixed?

Posted: Fri Feb 29, 2008 9:48 am
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

Re: Two backgrounds, one repeated and one fixed?

Posted: Fri Feb 29, 2008 11:06 am
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.

Re: Two backgrounds, one repeated and one fixed?

Posted: Fri Feb 29, 2008 12:17 pm
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.

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

Posted: Sat Mar 01, 2008 1:19 am
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.

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

Posted: Sat Mar 01, 2008 6:43 am
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:

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

Posted: Sat Mar 01, 2008 9:21 am
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.

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

Posted: Sun Mar 02, 2008 9:36 am
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?