Databases
StackOverflow2013
Postsdbo
POAlternatives to resizing background images
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAlternatives to resizing background images
    text
    copied!<p>I am creating a website that has this kind of structure:</p> <p>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...</p> <p>How can I do this?</p> <p>Update:</p> <p>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?</p> <p>Code:</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;untitled&lt;/title&gt; &lt;meta name="generator" content="TextMate http://macromates.com/"&gt; &lt;!-- Date: 2012-08-01 --&gt; &lt;style type="text/css" media="screen"&gt; 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; } &lt;/style&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8"&gt; $(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); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="area" id="a3"&gt; &lt;h1&gt;scene 3&lt;/h1&gt; &lt;/div&gt; &lt;div class="area" id="a2"&gt; &lt;h1&gt;scene 2&lt;/h1&gt; &lt;div style="height: 100px; border: 1px solid black;" id="text"&gt; hi &lt;/div&gt; &lt;/div&gt; &lt;div class="area" id="a1"&gt; &lt;h1&gt;scene 1&lt;/h1&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload