12 réponses à ce sujet

[vania z]

May I suggest that you change your background class fullSize from

fullSize {
background-size: 102% auto;
}

to 

fullSize{

background-position: right center;

}

? Because currently on fullHD displays it gets repeated vertically.

[vania z]

Also, to make it perfect you will need a javasript to scale the image based on screen resolution. Because image dimension is something like 2000x1000, it won't look good on 1440p displays even with my fix. I could write the javascript for you, if you like. 

[vania z]

window.onresize = function(event)
{
var fullSize = document.getElementById('ipboard_body');
fullSize.style.backgroundSize = 'auto '+ window.innerHeight+'px';
fullSize.style.backgroundPosition = 'right center';
}

you should execute this function on loading of the page and on resize events, than background will look properly.

[vania z]

I see that you fixed it in your own way. But you have done it without image scaling with javascript, it still looks bad on screens with high enough resolution. At least it looks good(rather good, except for large whitespace below the image) on 1080p screens. 

[vania z]

Thats how it currently looks on very high resolution screens. You can either fix this by making image fade to white graciously or by scaling the image using javascript.

[vania z]

For you to compare, thats how it looks on 16:9 screen with my script. 

[vania z]

To make my script even better, I changed it a bit. The version you may want to use is this:

 

window.onresize = function(event)
{
var fullSize = document.getElementById('ipboard_body');
if (window.innerHeight/window.innerWidth < 990/2560)
{
fullSize.style.backgroundSize = window.innerWidth+'px auto';
}
else
{
fullSize.style.backgroundSize = 'auto '+ window.innerHeight+'px';
}
fullSize.style.backgroundPosition = 'right top';
}

window.onload = function(event)
{
var fullSize = document.getElementById('ipboard_body');
if (window.innerHeight/window.innerWidth < 990/2560)
{
fullSize.style.backgroundSize = window.innerWidth+'px auto';
}
else
{
fullSize.style.backgroundSize = 'auto '+ window.innerHeight+'px';
}
fullSize.style.backgroundPosition = 'right top';
}
What I added is check for screen aspect ratio, to see if it is greater than the aspect ratio of your background image. I heard recently about displays with AR something like 26:9, it wouldn't look good on this screens. Now I fixed that.

[vania z]

Also, for image not to jump after the page is loaded, it is better to compute css server-side. The same thing my javascript does, but do it on the server. I don't know what language do you use and which framework, if I knew I could write this for you too. 

[vania z]

I checked your previous site, social.bioware.com there you had it fade graciously to black. 

[Justin Edmond]

Jesse (Programming Lead for social & forums) is out right now; but I'll make sure this gets to him.

[vania z]

Thanks a lot

[Jesse Reid]

And I will forward this along to Jessica. Thanks vania z.

[Jessica Merizan]

We are looking into this