Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Background
Which board are you doing this on? I still don't see any changes at the board you linked to in your initial post.
|
5/29/2011, 10:14 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Jewel5
Citizen
Registered: 08-2007
Province: Hooterville USA
Posts: 11
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re:
http://btestboard7.runboard.com/
|
5/29/2011, 10:21 pm
|
Link to this post
PM Jewel5
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Background
Thanks. I see the changes now.
Here's a rundown on what that code means:
body
Apply the following styling definitions to the whole page.
{
Start the styling definitions.
background-image: url(...);
Put that image in the background of the area we're styling.
background-repeat: no-repeat;
Don't repeat the image. In other words, only show it once and don't tile it.
background-attachment: fixed;
When the page is scrolled, don't move the image.
background-position: center top;
The background image will be centered horizontally, and at the top of the area we're styling (in this case, the whole page).
}
That's it for the body. Now we can style something else if we want to.
------------------------------
If you want the image to move with the rest of the page, remove this from your CSS:
background-attachment: fixed;
If you want the image to tile, remove this from your CSS:
background-repeat: no-repeat;
|
5/29/2011, 10:33 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Jewel5
Citizen
Registered: 08-2007
Province: Hooterville USA
Posts: 11
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re:
Ok, I removed what you said and it is still tiled.
|
5/29/2011, 10:50 pm
|
Link to this post
PM Jewel5
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Background
Sorry I missed the (not tiled) part of your request. I've been working a little too much lately without enough sleep.
There is no way to make a background image resizable, but you can fake it with an <img> tag, absolute positioning, and layering. This is a little complicated, so if you'd like, I can go in and do it for you.
|
5/29/2011, 11:01 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Jewel5
Citizen
Registered: 08-2007
Province: Hooterville USA
Posts: 11
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re:
I would appreciate it if you would, but Lesa, you don't have to do it right now hun. You get some sleep and work on it later if you want too. You've spent enough time on me this evening.
|
5/29/2011, 11:09 pm
|
Link to this post
PM Jewel5
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Background
It's not a problem. I'll do it right now.
|
5/29/2011, 11:13 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Jewel5
Citizen
Registered: 08-2007
Province: Hooterville USA
Posts: 11
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re:
There is no way to make a background image resizable, but you can fake it with an <img> tag, absolute positioning, and layering.
Like I know what that means...
|
5/29/2011, 11:17 pm
|
Link to this post
PM Jewel5
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
|
ReplyQuote
|
|
Re: Background
I told you it could be complicated.
Ok, I put it in there, and tested it on FF4, Opera, IE8, and Google Chrome, and it appears to be working properly in all of those browsers.
I removed the CSS we told you to put in initially, and added the following code:
HTML Header:
<div id="container">
HTML Footer:
</div><!-- end container, start fake background -->
<img id="background" src="http://i52.photobucket.com/albums/g14/Raymond63/ptr.jpg" alt="" />
<!-- end fake background -->
CSS:
/* Fake background pic. Change the actual pic in the HTML footer. */
#background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
/* This puts everything in front of the fake background pic */
#container {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 2; overflow: auto;
}
/* end container */
------------------------------------
If you want to change the image in the future and have it re-size like this one does, just change the image URL (src="....") in your HTML footer.
|
5/29/2011, 11:27 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Jewel5
Citizen
Registered: 08-2007
Province: Hooterville USA
Posts: 11
Karma: 0 (+0/-0)
|
ReplyQuote
|
|
Re:
It looks good! It's just what I was wanting. To change the background, I just change the url in the html footer? Thanks again Lesa.
|
5/29/2011, 11:34 pm
|
Link to this post
PM Jewel5
|