Website photo background - variable sizes.

techguy · 23-02-2010 1:51pm #1

Hi,

So i'm working on a site at the moment where there is a photo as the background. I currently have the bg set as: fixed, top, no-repeat. I am happy enough with the control I have with these settings.

The problem now is the amount of the photo that is show depending on the resolution. It seems to get the whole photo into the background I need to be able to select different image sized based on the screen/browser window size.

I don't have any code at the moment but I spotted something somewhere else so it shouldn't be too hard to get working. My plan involves doing something like this in JS.

if ( windows size = set1)
{
// load appropriate image.
}
else id (windows size = set2)
{
// load appropriate image.
}
// etc etc.. doing this for maybe 3 resolutions. small, medium and large.
// I also need to include an event for on resize and also maybe load all these
// images at the beginning so there's no delay in between resizes.

Just wondering would this be acceptable from a web design/development perspective or should I go and find another design that is more stable? The latter really isn't an option at the moment because i'm running out of time on this project.

What do you guys think?

Thanks.

Liam Byrne · 23-02-2010 3:37pm

techguy wrote: »
Hi,

So i'm working on a site at the moment where there is a photo as the background. I currently have the bg set as: fixed, top, no-repeat. I am happy enough with the control I have with these settings.

The problem now is the amount of the photo that is show depending on the resolution. It seems to get the whole photo into the background I need to be able to select different image sized based on the screen/browser window size.

Also, you've got an aspect ratio issue - how much of the image will have text "in front" of it, if it's full width on something like a netbook ? Can that text be read if it overlaps, or will it be off-screen if it's not ?

I don't have any code at the moment but I spotted something somewhere else so it shouldn't be too hard to get working. My plan involves doing something like this in JS.
if ( windows size = set1)
{
// load appropriate image.
}
else id (windows size = set2)
{
// load appropriate image.
}
// etc etc.. doing this for maybe 3 resolutions. small, medium and large.
// I also need to include an event for on resize and also maybe load all these
// images at the beginning so there's no delay in between resizes.
Just wondering would this be acceptable from a web design/development perspective or should I go and find another design that is more stable? The latter really isn't an option at the moment because i'm running out of time on this project.

What do you guys think?

Thanks.

Generally viewed as a bad idea, as you won't know where the image appears, or what it's overlapping.....unless it's a really "faded" image, you could obscure the text that's in front of it.

Where do you effect the boundary between the 3 "sizes" ?

That said, it'd be simple to do using jQuery.

It'd also be possible to have a more dynamic size using a PHP dynamic image resizer (e.g. set text container width to 50% and load an image that's 50% of the screen size) but then you're including the possibility that the file size could be huge.

techguy · 23-02-2010 5:35pm

Hi Liam,

Well i've been tricking around with different sized images and i'm pretty pleased with the control/placement. Its a background photo behind a container/content div with a solid background so i'm not too worried about that.

Where do you effect the boundary between the 3 "sizes" ?

What do you mean by this?

That said, it'd be simple to do using jQuery.

Cool, i'm all ears. Can you elaborate on this idea? I don't need code(only if you want to) but just a general idea on how this would work.

- I'm with you on the php idea and I have done something similar before with GD. My only question is how can you do this during the page load. i.e. how can you pass the window size to the backend (PHP), Ajax maybe?

Thanks.

cormee · 23-02-2010 5:44pm

Tutorails which might be of help:
http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
http://css-tricks.com/perfect-full-page-background-image/

techguy · 23-02-2010 5:55pm

cormee wrote: »

Tutorails which might be of help:
http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
http://css-tricks.com/perfect-full-page-background-image/

Hey cormee, I have seen that site but the solutions don't seem to be suitable for photobackgrounds. Thanks anyway.

EDIT: Just spotted your second link. Looking @ it now

Liam Byrne · 23-02-2010 7:25pm

techguy wrote: »

Well i've been tricking around with different sized images and i'm pretty pleased with the control/placement. Its a background photo behind a container/content div with a solid background so i'm not too worried about that.

OK - so you can ignore the reservation that I had re text placement and boundary containers, as you're not worried about the box appearing over the photo.

techguy wrote: »

I'm with you on the php idea and I have done something similar before with GD. My only question is how can you do this during the page load. i.e. how can you pass the window size to the backend (PHP), Ajax maybe?

Not even Ajax. Just the CSS equivalent of a Javascript image swap.

function loadBg() {
 wURLtemplate="url(backgroundImage.php?winSize=X)";
 wURL=wURLtemplate.replace("X",$(window).width());
 $("body").css({backgroundImage:wURL});
}

$(document).ready(function() {
  loadBg();
  $(window).resize(function() {
    loadBg();
  })
});

techguy · 23-02-2010 7:38pm

Cool, the idea of backgroundImage.php?PARAM is absolute genius.. Hadn't thought of that.

Anyway.

I've thrown the following together to test. While it seems to work, i.e. get values etc. it crashes after the function is called once. I then need to quit (not refresh) my browser to get it to run once more.

Is there any Javascript utilities I can use to get more control over this as i'm only using a text editor and firefox. Thanks.

<html>
    <head>
        <title>Javascript Testing</title>
    
        <script type="text/javascript">
            function test()
            {
                var width = screen.width;
                var height = screen.height;
                var resolution = width+"*"+height;
                alert("Screen resolution: "+resolution+" = ");
                
                switch(resolution)
                {
                    case "800*600":
                        document.write("Small Screen");
                        break;
                    case "1024*768":
                        document.write("Standard screen size");
                        break;
                    case "1280*1024":
                        document.write("Standard screen size");
                        break;
                    case "1680*1050":
                        document.write("Large Screen");
                        break;
                    case "1920*1080":
                        document.write("HD");
                        break;
                    default:
                        // Wild resolutions.
                        break;
                }
                
                //document.documentElement.clientHeight
                //var bWidth = window.innerWidth;
                //var bHeight = window.innerHeight;
                var bWidth = document.body.clientWidth;
                var bHeight = document.body.clientHeight;
                var bResolution = bWidth+"*"+bHeight;
                alert("Browser size: "+resolution+"<br />");
                
                switch(resolution)
                {
                    case "800*600":
                        document.write("Small Screen");
                        break;
                    case "1024*768":
                        document.write("Standard screen size");
                        break;
                    case "1280*1024":
                        document.write("Standard screen size");
                        break;
                    case "1680*1050":
                        document.write("Large Screen");
                        break;
                    case "1920*1080":
                        document.write("HD");
                        break;
                    default:
                        // Wild resolutions.
                        break;

                }
                return false;
            }
        </script>
    
    </head>
    
    <body onResize="test();">
        <p>
            Text
        </p>
    </body>
</html>

Also, @cormee, those guides are great but don't suit me as I need certain parts of the background image to appear in a certain parts for it to look right.

ocallagh · 23-02-2010 9:42pm

document.write can only be used while the page is loading. To write html after the page has loaded you need to use the DOM.

eg:

<html>
    <head>
        <title>Javascript Testing</title>
    
        <script type="text/javascript">
            function test()
            {
   var element = document.getElementById("para");
                var width = screen.width;
                var height = screen.height;
                var resolution = width+"*"+height;
                alert("Screen resolution: "+resolution+" = ");
                
                switch(resolution)
                {
                    case "800*600":
                        element.innerHTML = "Small Screen";
                        break;
                    case "1024*768":
                        element.innerHTML = "Standard screen size";
                        break;
                    case "1280*1024":
                        element.innerHTML = "Standard screen size";
                        break;
                    case "1680*1050":
                        element.innerHTML = "Large Screen";
                        break;
                    case "1920*1080":
                        element.innerHTML = "HD";
                        break;
                    default:
                        // Wild resolutions.
                        break;
                }
                
                //document.documentElement.clientHeight
                //var bWidth = window.innerWidth;
                //var bHeight = window.innerHeight;
                var bWidth = document.body.clientWidth;
                var bHeight = document.body.clientHeight;
                var bResolution = bWidth+"*"+bHeight;
                alert("Browser size: "+resolution+"<br />");
                
                switch(resolution)
                {
                    case "800*600":
                        element.innerHTML = "Small Screen";
                        break;
                    case "1024*768":
                        element.innerHTML = "Standard screen size";
                        break;
                    case "1280*1024":
                        element.innerHTML = "Standard screen size";
                        break;
                    case "1680*1050":
                        element.innerHTML = "Large Screen";
                        break;
                    case "1920*1080":
                        element.innerHTML = "HD";
                        break;
                    default:
                        // Wild resolutions.
                        break;
                }
                return false;
            }
        </script>
    
    </head>
    
    <body onResize="test();">
        <p id="para">
            Text
        </p>
    </body>
</html>

ocallagh · 23-02-2010 9:45pm

also, download firebug for Firefox for debugging. And notepad++ is a good editor

techguy · 23-02-2010 10:49pm

Hey guys,

thanks for the help.

I think I have this sorted now. I found a script for changing css attributes so I can select the background based on size.

I am tired not but i'll post all details tomorrow just in case anybody else is interested.

Liam Byrne · 23-02-2010 11:11pm

techguy wrote: »

I found a script for changing css attributes

jQuery would have allowed you to do this.

techguy · 23-02-2010 11:17pm

Liam Byrne wrote: »

jQuery would have allowed you to do this.

Yea I know.. I am an absolute write off when it comes to client side scripting/dev. Absolutely out of my depth. It's not really my area so it doesn't really bother me that I don't know how anything works..and thats why you won't really see me posting that much in the Design forum.:o

I'll post everything tomorrow, maybe you guys would be able help me to trim it down or make it more efficient..i'd really appreciate that.

Liam Byrne · 23-02-2010 11:25pm

techguy wrote: »

Yea I know.. I am an absolute write off when it comes to server side scripting/dev.

jQuery is client-side - it's basically a cracking JavaScript library.

techguy · 24-02-2010 12:28am

Liam Byrne wrote: »

jQuery is client-side - it's basically a cracking JavaScript library.

Oops, I meant that i'm shit at client side. I'm more of a backend/software developer.

Website photo background - variable sizes.

Comments