Runboard.com
Слава Україні!



🙂       Use the black navigation bar to log in or create your account.

Jump to Page:  1  2  3  4 

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

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.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/29/2011, 10:14 pm Link to this post PM Lesigner Girl Read Blog
 
Jewel5 Profile
Live feed
Blog
Friends
Miscellaneous info

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 Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Background


Thanks. I see the changes now. emoticon

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;

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/29/2011, 10:33 pm Link to this post PM Lesigner Girl Read Blog
 
Jewel5 Profile
Live feed
Blog
Friends
Miscellaneous info

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.Image
5/29/2011, 10:50 pm Link to this post PM Jewel5
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

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.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/29/2011, 11:01 pm Link to this post PM Lesigner Girl Read Blog
 
Jewel5 Profile
Live feed
Blog
Friends
Miscellaneous info

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.

Image
5/29/2011, 11:09 pm Link to this post PM Jewel5
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

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. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/29/2011, 11:13 pm Link to this post PM Lesigner Girl Read Blog
 
Jewel5 Profile
Live feed
Blog
Friends
Miscellaneous info

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...Image
5/29/2011, 11:17 pm Link to this post PM Jewel5
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Minerva
Head of Runboard staff

Registered: 11-2005
Posts: 9606
Karma: 132 (+147/-15)
ReplyQuote
Re: Background


I told you it could be complicated. emoticon

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. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
5/29/2011, 11:27 pm Link to this post PM Lesigner Girl Read Blog
 
Jewel5 Profile
Live feed
Blog
Friends
Miscellaneous info

Citizen


Registered: 08-2007
Province: Hooterville USA
Posts: 11
Karma: 0 (+0/-0)
ReplyQuote
Re:


Image 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.

 Image
5/29/2011, 11:34 pm Link to this post PM Jewel5
 


Add to this discussion

Jump to Page:  1  2  3  4 



You are not logged in (login)
Back To Top

This board's time is GMT.