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.

Background will not cover the entire screen.

View previous topic View next topic Go down

Background will not cover the entire screen.

Post by Kraizer on May 23rd 2013, 11:26 pm

I can't seem to get my background to adjust to other screen resolutions. I want my background to cover the page, regardless of the resolution of the viewer so it displays properly. I've googled 10's of websites and they all show CSS scripts that do not work (or maybe I'm not installing them properly).

If anyone could assist me with this, that would be great o.o

Kraizer
New Member

Posts : 12
Reputation : 1
Language : English

Back to top Go down

Re: Background will not cover the entire screen.

Post by Ultron's Vision on May 23rd 2013, 11:31 pm

What's your forum's URL?

Did you try using the CSS property background-size: 100%?

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Background will not cover the entire screen.

Post by Kraizer on May 23rd 2013, 11:48 pm

@Ultron's Vision wrote:What's your forum's URL?

Did you try using the CSS property background-size: 100%?

http://lostsoulssurvival.forumotion.com/

I don't believe I did. How would I go about using it?

Kraizer
New Member

Posts : 12
Reputation : 1
Language : English

Back to top Go down

Re: Background will not cover the entire screen.

Post by Ultron's Vision on May 24th 2013, 12:02 am

Well, that'd always resize the image to fit its actual resolution, as in, the image would never be resized, if that is what you want.

If so, add this to your CSS Stylesheet (Administration Panel -> Display -> Pictures and Colors -> Colors -> CSS Stylesheet):

Code:
body {
background-size: 100% !important;
}

I'm afraid that a 100% reliable background resizing feature isn't available for forumotion.
While there are sites which check your screen resolution for you, I'm not too sure if they can be implemented on forumotion.

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Background will not cover the entire screen.

Post by Kraizer on May 24th 2013, 12:08 am

@Ultron's Vision wrote:Well, that'd always resize the image to fit its actual resolution, as in, the image would never be resized, if that is what you want.

If so, add this to your CSS Stylesheet (Administration Panel -> Display -> Pictures and Colors -> Colors -> CSS Stylesheet):

Code:
body {
background-size: 100% !important;
}

I'm afraid that a 100% reliable background resizing feature isn't available for forumotion.
While there are sites which check your screen resolution for you, I'm not too sure if they can be implemented on forumotion.

So my best bet would to be to design a solid/pattern background to prevent awkward scaling?

Kraizer
New Member

Posts : 12
Reputation : 1
Language : English

Back to top Go down

Re: Background will not cover the entire screen.

Post by Ultron's Vision on May 24th 2013, 12:22 am

Actually, nevermind.

Use this JavaScript to set your background to the correct value; add it under Administration Panel -> Modules -> HTML & JavaScript -> JavaScript pages management -> Create a new JavaScript page.

Code:
window.onload = function(){

var height = screen.height, width = screen.width;

var cssstyle = /* note the triple s */ document.getElementsByTagName("style");

cssstyle[1].innerHTML += "body { background-size:" + width + "px " + height + "px; }";

};

Basically, with background-size: length height (in pixel or percentage) you can set the length and height of the background image.
Hope this helps Wink

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Background will not cover the entire screen.

Post by Kraizer on May 24th 2013, 12:32 am

@Ultron's Vision wrote:Actually, nevermind.

Use this JavaScript to set your background to the correct value; add it under Administration Panel -> Modules -> HTML & JavaScript -> JavaScript pages management -> Create a new JavaScript page.

Code:
window.onload = function(){

var height = screen.height, width = screen.width;

var cssstyle = /* note the triple s */ document.getElementsByTagName("style");

cssstyle[1].innerHTML += "body { background-size:" + width + "px " + height + "px; }";

};

Basically, with background-size: length height (in pixel or percentage) you can set the length and height of the background image.
Hope this helps Wink

Neither of the codes worked properly o.o

The background image is still being repeated and doesn't show up as intended.

Kraizer
New Member

Posts : 12
Reputation : 1
Language : English

Back to top Go down

Re: Background will not cover the entire screen.

Post by Ultron's Vision on May 24th 2013, 12:39 am

Okay, let's have a look at the background properties...

Code:
body {
background-repeat: no-repeat; /* prevent repeating */
background-position: fixed; /* prevent the background from moving */
background-size: 1366px 768px; /* set it to any resolution, this is what we want to emulate with the JavaScript... */
background-image: url('image url goes here'); /* enter image url here */
background-color: #fff; /* your desired background color; this is unnecessary as we want to cover the whole screen using JavaScript */
}

While we do want to ensure better viewability with JavaScript, principially, a site should work fine even when JavaScript is disabled.
So, my best advice is setting "background-size: 100%" and then overwrite the rule with added JavaScript.

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Background will not cover the entire screen.

Post by Kraizer on May 24th 2013, 12:57 am

@Ultron's Vision wrote:Okay, let's have a look at the background properties...

Code:
body {
background-repeat: no-repeat; /* prevent repeating */
background-position: fixed; /* prevent the background from moving */
background-size: 1366px 768px; /* set it to any resolution, this is what we want to emulate with the JavaScript... */
background-image: url('image url goes here'); /* enter image url here */
background-color: #fff; /* your desired background color; this is unnecessary as we want to cover the whole screen using JavaScript */
}

While we do want to ensure better viewability with JavaScript, principially, a site should work fine even when JavaScript is disabled.
So, my best advice is setting "background-size: 100%" and then overwrite the rule with added JavaScript.

I may be doing something wrong here. This is what it looks like in my browser:

http://i1341.photobucket.com/albums/o747/Reziark/Untitled2_zps4e13203c.jpg

Kraizer
New Member

Posts : 12
Reputation : 1
Language : English

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