ansaurus

Question

Answer 1

+3 A:

Basicly, it's impossible to use the background-image in a proper way imo.

I know that's your opinion but the rest of the web appears to disagree with you. They make it work. But that's probably not the major issue here.

Resizing a background for every user, hell, every request if you don't cache, is going to nuke your server in a nanosecond. GD resizes are expensive and if this is on shared hosting, you'll end up having your site kicked off it. If there are other sites on the same server, they'll slow to a crawl.

Even if you can shovel enough coal into the server, it's going to make for a pretty dodgy user experience. Rather than just being able to download the file, the browser is going to have to wait while the PHP generates the image and only then can it download.

And what if I loaded this site on a large screen? I've got a possible ~3840*1200 resolution here. Even if you don't scale it up, I'll have to download the full version. A large screen size doesn't mean I have redundant optical fibres to my computer.

But, all that said, it's certainly possible. I'd recommend you start with jQuery. It makes hooking onto window -load and -resize events and changing the CSS dynamically pretty simple. The gritty details can be accomplished with a few simple googles: "php resize image", "jquery onresize" and "jquery change background".

Oli 2009-01-21 10:03:21

Answer 2

A:

Hi Oli,

Thanks for your reply. Once i read your reply to the quote i thought: "Darn, i shouldve said fullsize background-images." Ofc you can always make an images wich fades into your background-color and such.

On the issue; Since it's a personal website, I cba with the (likely-les then) 1% with resolution higher then 1600x1200. I did find your information about the server-drainage very intresting. I had no experience with this.

I'll continue my search on Google wich hasnt been so successful thus far. Hence why im here. Thanks again on your reply tho. Take care.

Phil

Phil 2009-01-21 10:11:35

Don't post non-answers as answers.

Sinan Ünür 2010-02-05 02:44:49

Answer 3

A:

You also can make several css style sheet to match some resolutions. this UNTESTED example may give you some help.

<html>
  <head>
    <title></title>
    <link rel="stylesheet" id="styleSwitch" href="" />

    <script  type="text/javascript">
      function getStyle(){
      var theStyleLink = document.getElementById('styleSwitch');

     if (window.innerWidth < 810){
        theStyleLink.setAttribute("href",  "small-window.css");

     }
     else {
       theStyleLink.setAttribute("href",  "large-window.css");

       }
     }
   </script>
 </head>
 <body onload="getStyle();">

 </body>
</html>

Luis Melgratti 2009-01-21 11:08:41

Answer 4

A:

Hi Luis, Thanks for your reply. I have tried the multiple CSS file. It works to some limit. Yes, it pics the 'closest' correct file. But (there's always a big hairy but it seems), CSS never managed to tackle the 4:3 or widescreen difference. Plus i believe it'll pull the image out of its proportions when it comes to a widescreen.

Regar, Phil

Phil 2009-01-21 11:11:24

ansaurus

tags:

views:

answers:

Dynamic backgroundimages PHP GD

related questions