Forum Moderators: not2easy
<img src="url of picture" height="x%" width="x%" />
or
.img-resize{position:relative;display:inline-block;width:x%;}
<img src="url" class="img-resize">
Percent layers can dress pages nicely.
Stu Nicholls offers a heavy solution,
<snip>
Stu points out that image layers hog memory, tangle code, and stress compatibility.
EMBEDDED PERCENT RESIZE
How do you resize CSS liquid faux column background images?
.bgimg{background-image:url('url');background-position:x% x%;}
.bgimg{background-repeat:repeat;}
.colLeft{width:y%;float:left;}
<div class="colLeft bgimg">
This anchors and 'repeats' the image nicely in the liquid layout.
This works well for a flat color or texture tile.
But it is not 'resizing' the image.
HOW DO WE RESIZE AN EMBEDDED BACKGROUND IMAGE?
[edited by: SuzyUK at 12:43 pm (utc) on April 1, 2008]
[edit reason] no non-authority links thanks.. see charter for more info [/edit]
HOW DO WE RESIZE AN EMBEDDED BACKGROUND IMAGE?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
faux1 Column CSS Layouts - 2 Column - faux1-17-2-col
</title>
<style type="text/css">
<link rel="stylesheet" type="text/css" href="main.css" />
* { padding: 0; margin: 0; }
/* '*' styles all elements */
body{font-family:Arial, Helvetica, sans-serif;font-size:13px;}
#wrapper{margin:0 auto;width:922px;}
#faux1{background-color:aqua;margin:10px 0px;overflow:auto;width:100%;}
#faux2{background-color:fuchsia;background-position:30% 0;margin:10px 0px;overflow:auto;width:70%;}
#leftcolumn{display:inline;color:#333;margin:10px;padding:0px;width:195px;float:left;}
#rightcolumn{float:right;color:#333;margin:10px;padding:0px;width:683px;display:inline;position:relative;}
.clear{clear:both;background:none;}
</style>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin faux1 Columns -->
<div id="faux1">
<!-- Begin Left Column -->
<div id="leftcolumn">
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="faux2">
<div id="rightcolumn">
<p>enter favourite foo text here</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="clear">
</div>
</div>
<!-- End Right Column -->
<div class="clear">
</div>
</div>
</div>
<!-- End faux Columns -->
</div>
<!-- End Wrapper -->
</body>
</html>
[edited by: SuzyUK at 12:56 pm (utc) on April 1, 2008]
[edit reason] examplified text in code, no specifics thanks [/edit]
The Open Cube method is very 'heavy' and thus slow loading, much like Stu Nicholls' 'src' anchored rabbit. Too complex and buggy to hold up as a standard method. We need a light and sensible standard method.
[edited by: SuzyUK at 1:01 pm (utc) on April 1, 2008]
[edit reason] please no links [/edit]
as swa66 says you cannot resize a CSS background-image. hhowever from what you're describing it sounds to me like the "Sliding Doors" might be an option?
The code you have above doesn't really describe what you want to do, and Stu's code is nothing more than an absolute layer/div (containing an inline image) set behind everything else and NOTE: he even says on his own page:
But it only works with a 100% x 100% html/body
If you want a left and right column where the images "shell" into one another I think you're describing Sliding Doors?
if you just want an image behind the right column to resize to a fluid width then I think you're out of luck.
-Suzy
((I have to assist Microsoft/Symantec with a Vista memory bug for a few days, but feel free to reply if you have something POSITIVE to contribute, thanks.))
((I have to assist Microsoft/Symantec with a Vista memory bug for a few days, but feel free to reply if you have something POSITIVE to contribute, thanks.))
Good for you, maybe MS can help you out while you help them, then you can come back here and enlighten us lot? - ooops nothing *positive* here, just realism sorry!
if you do read this when you're not so busy, it does help you get an answer/reply when there's at least an inkling of respect there in the first place.
[edited by: SuzyUK at 9:07 pm (utc) on April 2, 2008]
