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.

Resizeable Background Image

View previous topic View next topic Go down

Solved Resizeable Background Image

Post by MadroX on May 5th 2014, 10:19 am

Hey everyone, I was just wondering if there was any way that I could make my background image adjust to the monitor resolution.

Basically, I want my background image to stay centered and cover the entire screen, no matter the size of monitor being used. I also want to to this without the image creating scollbars and cutoff points on my webpage.

My website adress is riseoftron.4rumer.com and I am using phpbb2


Last edited by MadroX on May 5th 2014, 11:07 am; edited 1 time in total

MadroX
Forumember

Posts : 39
Reputation : 0
Language : English

Back to top Go down

Solved Re: Resizeable Background Image

Post by Ange Tuteur on May 5th 2014, 10:38 am

Hello MadroX,

Using the background-size property should work. Very good

Display > colors > CSS stylesheet
Code:
body { background-size:100%; }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Resizeable Background Image

Post by MadroX on May 5th 2014, 10:43 am

Ok, well one thing I mentioned is I would like the image to be centered as well, Like for example if I miniscale my browser I would like the image to remain centered in the box. Any way to do this?

Also I'm not sure how to test if this will work, My background image is scaled for 1440x900 pixels, and that is the resolution size of my monitor

MadroX
Forumember

Posts : 39
Reputation : 0
Language : English

Back to top Go down

Solved Re: Resizeable Background Image

Post by Ange Tuteur on May 5th 2014, 10:47 am

Have you added the code to your stylesheet ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Resizeable Background Image

Post by MadroX on May 5th 2014, 10:54 am

yes I have, I can't really tell a difference at all, I tried minimizing my window and the image stayed the same size and did not center

MadroX
Forumember

Posts : 39
Reputation : 0
Language : English

Back to top Go down

Solved Re: Resizeable Background Image

Post by Ange Tuteur on May 5th 2014, 10:58 am

Hmm that should work, see if adding important works. Also, place it at the top of your stylesheet.
Code:
body { background-size:100% !important; }

When set the background image should adjust to fit the screen.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Resizeable Background Image

Post by MadroX on May 5th 2014, 11:03 am

Ok thank you so much! Topic solved! I did not realize it needed to be added to the top of the css, I put it at the very end lol! Thanks again Smile

MadroX
Forumember

Posts : 39
Reputation : 0
Language : English

Back to top Go down

Solved Re: Resizeable Background Image

Post by Ange Tuteur on May 5th 2014, 11:09 am

You're welcome Very Happy

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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