Menu
Community /Pin to ProfileBookmark
@NogDogApr 23.2008 — #Rather than a PHP solution (if there is one), I'd recommend breaking the "film strip" portions of the image into separate images which can be used as separate backgrounds in a 3-column layout with fixed-width outer columns (holding the film strips) and a fluid middle column for the page content.
To dynamically change the size of a background image, you'd probably need to use a bunch of JavaScript to determine the current window width, then update the background image by requesting the image from a PHP file that would dynamically re-size it based on a supplied value in the url or post data. However, if we're talking about a 1280x1024 image, we're talking about using up a lot of memory on the server each time the image is requested, due to PHP image functions processing images as bitmaps, which can use quite a lot more memory that a JPEG, GIF, or PNG file of the same dimensions.
Alternatively, and more efficient if not quite so flexible, would be to have several versions of the image on the site in different dimensions, then have JavaScript code which selects the most appropriate image for the current window size. This would not require any PHP. @NogDogApr 23.2008 — #Here's a fairly simple solution:
@NogDogApr 23.2008 — #It's just a sample page to show a method of laying out the page. Move the stuff in the <style> block to your CSS stylesheet, and replace the "Lorem Ipsum" text within the <div id="main"> . . . </div> to whatever you want to actually output. (And of course adjust the stuff in the style section to use your images, desired colors, widths, etc.)
How do you make a background image fit different resolutions
I have an image that I put on the back of a theme and it fits perfectly on my 19″ monitor with 1280 x 1024 resolution But my other computer with a 17″ monitor and 1024 x 768 resolution doesn’t look right and the image is clearly too large. The right hand side film strip is completely missing.
Here is a screen shot of what it is supposed to look like.
[URL=http://i307.photobucket.com/albums/nn318/feistycritic/FeistyCritic.jpg]
[IMG]http://i307.photobucket.com/albums/nn318/feistycritic/th_FeistyCritic.jpg
Here is a screen shot of what it is doing on 1024 x 768 resolution and I am sure on other resolutions it looks just as bad.
[URL=http://i307.photobucket.com/albums/nn318/feistycritic/FeistyCritic2.jpg]
[IMG]http://i307.photobucket.com/albums/nn318/feistycritic/th_FeistyCritic2.jpg
Any idea how to make this work right? I have been searching all day and I don’t know php very well so I really need some specific help on this one.
Sign in
to post a comment6 Comments(s) ↴
0
@NogDogApr 23.2008 — #To dynamically change the size of a background image, you'd probably need to use a bunch of JavaScript to determine the current window width, then update the background image by requesting the image from a PHP file that would dynamically re-size it based on a supplied value in the url or post data. However, if we're talking about a 1280x1024 image, we're talking about using up a lot of memory on the server each time the image is requested, due to PHP image functions processing images as bitmaps, which can use quite a lot more memory that a JPEG, GIF, or PNG file of the same dimensions.
Alternatively, and more efficient if not quite so flexible, would be to have several versions of the image on the site in different dimensions, then have JavaScript code which selects the most appropriate image for the current window size. This would not require any PHP.
0
@NogDogApr 23.2008 — #Here's a fairly simple solution:<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled 1</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
padding: 0 190px 0 0;
background: white url(http://www.charles-reace.com/image/noggin.jpg) repeat-y 100% 0;
height: 100%;
}
#main {
margin: 0;
padding: 0 10px 0 200px;
background: white url(http://www.charles-reace.com/image/noggin.jpg) repeat-y 0 0;
height: 100%;
}
/* IE6- hack */
* html #container {
height:100%
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<h1>Test Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</p>
</div> <!-- main -->
</div> <!-- container -->
</body>
</html>
0
@NogDogApr 23.2008 — #