Forums

Site Resolution Scaling

Permalink
Good day All,

I have created and placed an image as the background to my site, but it seems that when testing on with different resolutions there are certain resolutions where the text will "spill" over the transparent middle layer. Have I possibly done something wrong with the image, or is there any way to fix this? The site looks great in 1280x1024, but obviously the whole world doesn't use that.

icarustech.com

body {background: url(images/universe6.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}


Thanks!
 
jbx replied on at Permalink Best Answer Reply
jbx
Well, the problem is, that your stretching the bg image to fit the whole screen - so if the screen size decreases, so does your image and the middle section for your content is a part of that image.

I'm guessing that you want the left and right images to stay fixed to the left and right sides of the screen, but never get closer together than your content width. The way I would try this, is to nest 3 divs inside each other.

1st div:
100% width
background top left

2nd div:
100% width
background top right

3rd div:
980px width (or content area width)
black background
margin 0 auto

Even as I'm typing I'm realising that approach has issues though. Now I'm thinking maybe 1 single body bacvkground image that doesn't scale, but just have it wide enough that it generally shouldn't matter and maybe fade the far left and right edges into black so that it looks ok on really wide screens.

Does any of that help?? :S

Jon
12345j replied on at Permalink Reply
12345j
Or tryhttp://buildinternet.com/2009/02/supersized-full-screen-backgrounds...
craftyCS replied on at Permalink Reply
craftyCS
Hi I tried implementing Supersized and it appears to need a fair bit of work on the javascript side to get the images to be loaded from the Library. Have you had any luck implementing this in C5?
Raymond replied on at Permalink Reply
@jbx: That was my original approach, and I too came up with the same issues. I appreciate your thought in it though, as it's reassuring to know I'm not the only one thinking about this. I even tried the scaling, but unfortunately it ruined the site on all lower resolutions. (Instead of the few oddballs ones I'm trying to fix now). Let me know if you come up with anything else. Picking your brain is a great help.

@12345j: I'll take a look at what you posted, it seems promising.


This is where I think the real issue lies though. In my main.css (based of the default theme) the following code controls the content width.

/* Page Structure / Navigation */
#page{ width:800px; margin:auto; text-align:left }


This issue with this is, it obviously doesn't scale with the image...

Edit: Interestingly enough when I checked my site on screen-resolution.com today it worked just fine (with IE). Unfortunately, I'm not an IE fan and it seems to be a scaling issue with Chrome. I'll have to dig a little deeper on this one. Thanks all!

-Ray
changeforchildren replied on at Permalink Reply
Did you ever figure this out? This is happening to images on my site. The header image falls off the page sometimes, depending what computer or resolution you are using...

http://www.changeforchildren.com

zoom in and out... see what I mean? Thank you!