Logged Out
Create an Account
Login:
Password:

Forgot your password?
Static (?) Background Image

Static (?) Background Image
[Back to Index]
Thread Tags
Primary: [Support]
Secondary: None

I have uploaded several background images to try them out and I realized that one reason I hate them all is that they move with the rest of the site, if I'm even saying that right. I lack the skillset and the vocabulary to explain what I'm talking about, but the best web pages have an image that does not move with the rest of the HTML boxes and text on the page...they seem to slide over a static image as you scroll. Is this something I can make happen relatively easily, or is it likely over my head?

Best,

Nik
Bah, I'm confused...maybe this isn't even what I want. As an alternative to a static image, can someone tell me what size the background image has to be so that in doesn't have to be centered or tiled? I'd like to find or create an image that fits the entire space, if that makes sense...

Best,

-Nik
Quote by Nikrono
Bah, I'm confused...maybe this isn't even what I want. As an alternative to a static image, can someone tell me what size the background image has to be so that in doesn't have to be centered or tiled? I'd like to find or create an image that fits the entire space, if that makes sense...

Best,

-Nik


Alas your problem here will be that people all run different resolutions. Your fighting the battle of getting it to look right to you but then it might end up looking off to the next person.

I think your first idea is more what you probably want. You want the image to stay centered on the page no matter what direction it is scrolled. I know there are ways to do this but I am not familiar enough with the code for it. You probably want Nobelkain or Toddler to give you some pointers here.


--
Six Demon BagRefresh This Item
Jack Burton: Hey, what more can a guy ask for?
Egg Shen: Oh, a six-demon bag!
Jack Burton: Terrific, a six-demon bag. Sensational. What's in it, Egg?
Egg Shen: Wind, fire, all that kind of thing!
What you need to do is to use the advanced layout options and design your page from the ground up. You use this image you want centered in the middle of the body of the page.

You then create a frame that is scrollable and put your page content into it. You will need some fancy javascript to set the size of the frame when the page is opened, so that it works on different screen resolutions as you want it to.


--
Eleipher, The Warlock Extraordinaire
The New Beginning
Thorium Brother Hood



Guild Webmaster
Is there a way of doing the image so its is not centred but say remains in top left at all times.

That way you have a standard background colour (say black) and then your image is blended in to this so regardless of resolution the image allways remains top left and there for the site looks good.
You can do any image and make it be the Top-Left or centered.

You accomplish this by setting a style on the <BODY> tag.

ex.

Top Left:
<Body style="Background-Image url('MyPic.gif'); Background-Position: top left;">

Top Center :
<Body style="Background-Image url('MyPic.gif'); Background-Position: top center;">


By default, the position is top left. It's great form to use keywords for both the X (horiz) and Y (vert) placement similar to my examples, however if you just choose to use 1 keyword, it represents the X coordinant, and the Y is centered.

Appropriate keywords are:
left, center, right (X-Horiz)
top, center, bottom (Y-Vert)


You can get more complex by using percentages or absolute units, but for now, I suggest just trying the basic keyword approach.


Also, you can avoid tiling by adding the following style:
Background-Repeat.

ex.

Top Left:
<Body style="Background-Image url('MyPic.gif'); Background-Position: top left; Background-Repeat: no-repeat">

By default it will repeat both horiz and vert. You have the following options:

repeat (default)
no-repeat
repeat-x
repeat-y


Thought I'd add an additional suggestion.

If you're hoping to get the "endless bg" effect like WorldofWarcraft.com or my site http://apocalypse.dkpsystem.com ,
You'll need to create a bg that tiles Horizontally well. You can see in my site, that it isn't easy to do (I wasn't able to get mine perfect, but I got close), but it CAN be done. The best way to do it, is to avoid images that have a defined border.

Another thing you can do is just use a VERY WIDE image for your BG. It won't create scrollbars because it is a BG, not actual image content. However it will show more and more of the image as the screen widens. This is an easier approach for those who don't have amazing graphical skills.
Quote by Noblekain
Thought I'd add an additional suggestion.

If you're hoping to get the "endless bg" effect like WorldofWarcraft.com or my site http://apocalypse.dkpsystem.com ,
You'll need to create a bg that tiles Horizontally well. You can see in my site, that it isn't easy to do (I wasn't able to get mine perfect, but I got close), but it CAN be done. The best way to do it, is to avoid images that have a defined border.

Another thing you can do is just use a VERY WIDE image for your BG. It won't create scrollbars because it is a BG, not actual image content. However it will show more and more of the image as the screen widens. This is an easier approach for those who don't have amazing graphical skills.



I must say that is a very nice site, could you tell me how you made the chain link effect on your menu? That is very clean looking. I think it is safe to assume from what I have seen so far this one just takes home the prize for most clean, stream lined site yet. I would really like to pick your brain as im still learning this advanced layout on how to make mine look like this...
Each FULL menu (Full Left, and Full Right) is a Table with a background image (repeat-y). This 1 image has 2 chains. I created the image to look right when it repeats, so that it looks like two continual solid chains.

Each individual menu section is it's own Table inside the main table (Background-Color: #000000 -- otherwise known as black ). That way, while the image repeats behind it, you can't see through the black background. On my collapsable scripting, I modify the margins of the Section Table. (i.e. when the sections are expanded, I give them a top and bottom margin of 10px, and when collapsed, a margin of 0px) This means that when collapsed each section is right against the other (no space for visible chains), but when expanded there's 20px between each so you can see a section of chain.


[EDIT]: Thanks by the way. I appreciate your comments


[Back to Index]