Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : General Discussion > Verticle tiling + centering a background image?
Thaeric (Member) 5/20/2010 6:37 PM EST : Verticle tiling + centering a background image?
Thaeric
Posts: 1389

0
Like

0
Dislike

I have been trying ever-so hard to update the graphics and look of my page, in preparation for the release of Mortal Online. I have even borrowed a friends photoshop cs4 and dreamweaver cs3. I am starting to get the hang of some stuff in PS, but DW eludes me entirely. The last time I did anything with webpages was back when the only thing you could find to help you were encyclopedia sized html coding books and the fire java applet was the rage. Anyway...

I am sure its been asked before but I cant find it. After 3+ hours of searching, I'll take my chances of repeating a question...

forsaken/clangroups.com

I am trying to find a way to auto-center the background image while also vertically tiling it. I also plan to put a footer png, and a different banner in but one step at a time. Is it as simple and going in and putting a center command in css? or is there more to it?


I posted this on the admin forums as well, but haven't gotten an answer there. Thought you might see it here if not there.


TopBottom

Mottie (SuperAdmin) 5/20/2010 7:14 PM EST : RE: Verticle tiling + centering a background image?
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Thaeric!

To position a background image, you need to use the "background-position" definition:
body { background-position: top center; }
Or you can combine it with the "background" definition in this short-hand way of defining the background:
body { background: #000 url(http://www.axiomfiles.com/Files/345154/newbg.jpg) top center fixed; }
I don't think the control panel allows you to fix and position the background at the same time, so add the code above to you CSS Additions tab (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard tab). Then be sure to check the "Enabled?" box before clicking on [ Save Changes ].
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Thaeric (Member) 5/20/2010 7:25 PM EST : RE: Verticle tiling + centering a background image?
Thaeric
Posts: 1389

0
Like

0
Dislike

That's VERY close to what I wanted; but now it is adding more of the image to the sides of it, almost like its tiling, instead of just vertical tiling and allowing the black background to fill up the rest.

is there a way to stop it from repeating horizontally?

TopBottom

Thaeric (Member) 5/20/2010 7:31 PM EST : RE: Verticle tiling + centering a background image?
Thaeric
Posts: 1389

0
Like

0
Dislike

Just figured it out.

body { background-position: top center;  repeat-y;}

did what i was looking for.


Thank you so much for your help!


Do you have a button or anything I could post on my page as a way of saying thanks?

TopBottom

Mottie (SuperAdmin) 5/21/2010 9:02 AM EST : RE: Verticle tiling + centering a background image?
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Thaeric said:
body { background-position: top center;  repeat-y;}


It's odd that that would work... does it work on IE? I would have thought you would need this:
body { background-position: top center; background-repeat: repeat-y }
or the shortcut method:
body { background: top center repeat-y; }
Thaeric said:
Do you have a button or anything I could post on my page as a way of saying thanks?


Thanks! But there is no need to do that 
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Thaeric (Member) 5/21/2010 12:13 PM EST : RE: Verticle tiling + centering a background image?
Thaeric
Posts: 1389

0
Like

0
Dislike

It's working on my IE and FF, and on my wife's computer and her multitude of browsers as well.









TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%