CODEWITHSUNDEEP
javascripthtmlcssimage
flowers
flowers

Reputation: 173

Alternatives to resizing background images

I am creating a website that has this kind of structure:

Where the red box represents the user's browser window. When the user clicks a button on the home (bottom), it slides up to the new scene (stratosphere for example). Each scene is an entire image. Now the problem is, I need to account for users using different screen sizes and when they resize the window. I've looked up ways to resize backgrounds images using CSS or JavaScript, and that doesn't work well for me. I need to find some way to make them all fit for everyone using different screen sizes. An idea I have - I know this sounds clunky but would it be viable to write a PHP script which resizes an image to the dimension given by the JS? JS finds the browser window's size, hands it to PHP, PHP returns the image JS needs. And have this happen when a user resizes the browser window too...

How can I do this?

Update:

I tried SVG, and it's working beautifully. But now I am wondering how I can get the other elements to be in accordance with the SVG?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <!-- Date: 2012-08-01 -->
    <style type="text/css" media="screen">

     body { margin: 0px; }
     .area { border: 3px solid red; background: green; margin-bottom: 0px; background: url(http://www.alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/beetle.svg) no-repeat; }

    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {

       function scroll_to(id, speed, margin) {
         $('html, body').animate({
           scrollTop: $('#' + id).offset().top - margin
         }, speed);
       }

      var slide = 'a3'

       $(".area").height($(window).height());

       $(window).resize(function() {
         $(".area").height($(window).height());
         $(".area").width($(window).width());
         scroll_to(slide, 1, 0);
       }); 

       scroll_to('a2', 'slow', 0);

     });
    </script>
</head>
<body>

  <div class="area" id="a3">
    <h1>scene 3</h1>
  </div>
  <div class="area" id="a2">
    <h1>scene 2</h1>
    <div style="height: 100px; border: 1px solid black;" id="text">
     hi 
    </div>
  </div>
  <div class="area" id="a1">
    <h1>scene 1</h1>
  </div>

</body>
</html>

Upvotes: 4

Views: 392

Answers (4)

darksky
darksky

Reputation: 2090

You should definitely split the image into multiple images, one for each tab.

This is how I would do it: http://jsfiddle.net/4CwdX/3/

You don't need to resize the image. The browser can automatically stretch it for you with background-size: 100%.

Upvotes: 0

Kijewski
Kijewski

Reputation: 26033

Why don't you use an SVG as background image? Your scene seems fairly simple.

All browser but IE ≤ 8 understand background: url(some.svg): http://caniuse.com/svg-css

Upvotes: 2

uınbɐɥs
uınbɐɥs

Reputation: 7351

Use one large background-image. Set it up with something like this:

html, body {
    margin: 0;
    padding: 0;
    width: 100%
}
body {
    position: absolute;
    bottom: 0;
    height: 2000px;
    background-image: url('background.png')
}

Then use JavaScript to set the bottom property of body to move up, like this:

window.addEventListener('keydown', keypressed, false);
function keypressed(e) {
    if(String.fromCharCode(e.charCode) == ' ') {
            document.body.style.bottom += parseInt(document.body.style.bottom) + 10 + 'px';
    }
}

Upvotes: 1

TimmyTooTall
TimmyTooTall

Reputation: 26

I'm afraid re-sizing the background image is going to be your best bet. Why don't you post the code you've already tried for such a solution and others can help you along from that angle.

Upvotes: 0

Related Questions