The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Center the background

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

View previous topic View next topic Go down

Solved Center the background

Post by Design on March 20th 2013, 11:53 pm

I wonder how you can center the background, if you check my forum now it's instead 2 pictures and yea it doesn't fit in correctly.

So the question is how i can center it.

Forum : http://wowguides.wowmmorpg.net/


Last edited by Design on March 23rd 2013, 11:12 pm; edited 1 time in total

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by SLGray on March 21st 2013, 12:49 am

Did you add the background image in your CSS?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35620
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Center the background

Post by Design on March 21st 2013, 12:52 am

If you mean CSS Stylesheet... No i didnt.

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by runawayhorses on March 21st 2013, 3:42 am

You can center it by using the background position property in the body selector, like this example below:

Code:
body {
   margin: 0 auto;
   background-color: #000000;
   background-image: url('URL OF BACKGROUND GERE HERE');
   background-position: center;
   background-repeat: no-repeat;
background-attachment: fixed;
  width:100%;
}

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center the background

Post by Design on March 21st 2013, 3:51 am

Well now the problem is that there's a big gap at the bottom. Do i have to make the picture longer or can you like synchronise the background?

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by Design on March 22nd 2013, 5:44 am

Bump.

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by Macca_96 on March 22nd 2013, 6:02 am

I suggest making it fixed, so it wont scroll with the rest of the page. background: fixed;

Macca_96
Forumember

Posts : 232
Reputation : 0
Language : English

Back to top Go down

Solved Re: Center the background

Post by runawayhorses on March 22nd 2013, 12:31 pm

You need to make the background "fixed" and add a size property in the body selector like the examples below, that will give you the effect your inquiring about.

Add these two properties in your css body selector or change them to this:
Code:
background-attachment:fixed;
background-size:100%;


runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center the background

Post by Design on March 22nd 2013, 7:33 pm

On my computer everything seems to be fine, but when i checked on my mac the background is waaaaaaay to big, how can it be like that?

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by runawayhorses on March 22nd 2013, 9:25 pm

Because the 100% is stretching the back and makes it look awkward for some size monitors, the 100% is perfect to use for seamless backgrounds, but you don't really need it you just use a background-repeat: repeat. The working around for your back is to resize it to fit your monitor size, but that's no good for other size monitors and if you have a fluid width it will never be right for anyone but your size monitor and computer resolution settings. I seen your back and thats a tricky one to make right for all different size monitors and resolutions because you're trying to make the borders of the background the same on both sides,, and you won't be able to make it right for all size monitors if your template body is a using percentages for the width and height.

So if you're using percentages it will change for different size monitors. To see what your forum is go to AP>>General>>Configuration>> On that page check and see under "Pages structure" if your using percentages or pixels for the width and height.

The bottom line is for the background you're using is its tricky, and it needs a fixed body template, and that would mean configuration needs to be pixels like 980px so you can size your background to that, but even then different computer resolution settings can change all that, if your configuration is percentages (fluid) you background will look different and not centered correctly for different size monitors other than the monitor you use to resize the background with using percentage configuration. So if I were you I would not try and center a bordered background unless I had a fixed configuration, if you want to use fluid you're better off with a different background that is seamless, so that way it always looks right under any circumstances. You might just have to experiment with different settings and backs to find one that works well.

So I can't give you a direct answer to you latest question because I don't know your forum configuration settings, and quite frankly to work that problem out with the back you are using I would need to experiment with it and have other people look at it with there different size monitors and resolution settings. Thats my way of doing it because there are so many variables with a background such as the one you are working with.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center the background

Post by Design on March 22nd 2013, 9:37 pm

Ah i totally understand now, thanks for the information. I've been trying experimenting with it now for a while and can't figure it out to get it correct. But i think i'll work on another background or ask for some help here on forumotion.

Do you recommend any settings on the picture cause the one i have now atm is max 1080x1920 and maybe there's another picture size i might use so it looks kinda good on both so there's not a big *glitch* somewhere you know.

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by runawayhorses on March 23rd 2013, 3:15 am

Edit: I was wrong its 983x1024, photobucket messed me up with ther new design and the way they do codes now, photobucket is a mess..

Your CSS stylesheet has this URL in it that is not a proper image ending format: http://i1042.photobucket.com/albums/b430/RapsGraphics/design_wow_bkgrnd2.png:original

Change it to this:
http://i1042.photobucket.com/albums/b430/RapsGraphics/design_wow_bkgrnd2.png

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center the background

Post by Design on March 23rd 2013, 4:16 am

It worked but now there's another problem on the right side there's a little gap... Damn this is complicated.

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by runawayhorses on March 23rd 2013, 4:18 pm

I don't see it on my monitor, can you take a screenshot of it and post it here? If you can't then try these codes again, I strongly recommend you make your background fixed.

Code:
background-attachment:fixed;
background-size:100%;

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center the background

Post by Design on March 23rd 2013, 7:09 pm

Here you have a picture how it looks for me.

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by runawayhorses on March 23rd 2013, 9:10 pm

Its that black space on the background, if that wasn't there you wouldn't have a problem,.

Try adding this code to the body with the other codes and see if that helps any, althogh I think you're going to need another background that doesn't have that black space on it.

Code:
background-position: center;

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center the background

Post by Mariofan13 on March 23rd 2013, 9:20 pm

I have a much higher resolution, and I saw the black bar too.
The problem is not the background-position, it is the background-size. The black space of the background image is much wider than the forum, that's the reason, why we see a black bar right to the forum. So we have to resize te picture to a screenfilling size, and this is the code:
Insert this code in your CSS:
Code:

body {
background-attachment:fixed;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}

Mariofan13
Forumember

Male Posts : 188
Reputation : 6
Language : German, English, Latin, 1337, HTML, CSS, BBCode, Wikitext
Location : Mushroom Kingdom

http://mario-forum.net

Back to top Go down

Solved Re: Center the background

Post by runawayhorses on March 23rd 2013, 9:59 pm

Yeah the background-size:cover; did the trick for me, well Mariofan. Smile

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

Solved Re: Center the background

Post by Design on March 23rd 2013, 11:11 pm

Seems like there's a problem after problem... I inserted the code and i don't know what happend everything got huge. But the way it became now looks good actually so i want to keep it this way Smile

Appreciate your help guys really much. Cool

Design
Forumember

Male Posts : 88
Reputation : 1
Language : Swedish
Location : Sweden

http://wowguides.wowmmorpg.net/

Back to top Go down

Solved Re: Center the background

Post by SLGray on March 24th 2013, 1:27 am

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35620
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum