How to style image that is 100% width and proportionate height?

HTML & CSS
1

first, let me give advance thanks for any assistance up top here since this is a long post. i’ve just spent the past five hours trying to figure this out on my own.

how do i place a page background image that scales to the width of the window with a height proportional to the original image size. the rest of the page backgrounds will be a color.

also for the same project but not as critical, is there a standards-based way to set an element background color opacity but still have the text at 100% opaque?

i want a “forward facing” page that validates as transitional but uses as much HTML5/CSS3 as possible within that parameter. or is it ok to validate HTML5/CSS3 as coding to web standards now so long as you know what won’t work in <IE9 so your design stays nice? what is the best practice for claiming to be a standards-based designer/coder in this latest time of transition?

my main resources were:
http://www.pziecina.com/portfolio/page_one.php, and
http://css-tricks.com/perfect-full-page-background-image/ (css 1 and 2 versions)

here is my modified code fore each, or, you can download the attached zip. (the image link is absolute to an online image.)

css-1:

<!--<!DOCTYPE HTML>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



	<meta charset="utf-8">
	
	<title>Full Page Background Image | CSS #1</title>
	
	<style>
	body{
	margin:0;
	padding:0;
	background-color: #4e4d30;
	}
		
		img.bg {
			/* Set rules to fill background */
			/*min-height: 100%;*/
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		.transparent_class {
        filter:alpha(opacity=70);
        /*-moz-opacity:0.7;
        -khtml-opacity: 0.7;*/
        opacity: 0.7;
}
		
		#page-wrap { position: relative; width: 800px; margin: 0px auto 50px auto; padding: 20px; background: #FFFFdd; border: 1px solid #4e4d30; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; opacity: 70%;}
		p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px;}
	
				
	</style>
</head><body>

	<img src="http://mtouchette.com/testing/onLandBkg.png" class="bg">
	
	<div id="page-wrap" class="transparent_class">
	
		<p>Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat 
vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet 
quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat 
eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. 
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, 
wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum 
rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis
 pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus 
faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. 
Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
facilisis luctus, metus</p> 
		
	
	</div>
	

</body></html>

css-2:

<!--<!DOCTYPE HTML>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">



	<meta charset="utf-8">
	
	<title>Full Page Background Image | CSS #2</title>
	
	<style>
	body{
	margin:0;
	padding:0;
	}
	
		#bg {
			position:fixed; 
			top:-50%; 
			left:-50%; 
			width:200%; 
			height:200%;
			background-color:#4e4d30;
		}
		#bg img {
			position:absolute; 
			top:0; 
			left:0; 
			right:0; 
			bottom:0; 
			margin:auto; 
			min-width:50%;
			min-height:/*50%*/auto;
		}
		
		#wrapper { position: relative; z-index: 2; width: 800px; margin: 0px auto 50px auto; padding: 20px; Border: 1px solid #4e4d30;background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
		p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; }
	</style>
<!--<script src="css-2.php_files/bsa.js" async="" type="text/javascript"></script><script src="css-2.php_files/ga.js" async="" type="text/javascript"></script>--></head><body>
	
	<div id="wrapper">
	
		<p><strong>Original source code: http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php#</strong></p>
		<p>Pellentesque habitant morbi tristique senectus et netus et 
		  malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat 
		  vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet 
		  quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat 
		  eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. 
		  Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, 
		  wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum 
		  rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis
		  pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus 
		  faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. 
		  Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
		  facilisis luctus, metus</p>
      
</div>
	
<!-- At bottom, 'cause it's not really content -->
	<div id="bg">
		<img src="http://mtouchette.com/testing/onLandBkg.png" alt="">
	</div>
	

</body></html>

page_one:

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>P. Ziecina - Portfolio cover page.</title>
<meta http-equiv="X-FRAME-Options" content="Deny">
<style type="text/css">
<!--
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
	color: #2a2d2e;
	background-color: #3366FF;
	font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
	font-size: 12px;
	margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	text-align: center; /* Centers the page content container in IE 5 browsers. */
	background: #3366FF url(http://mtouchette.com/testing/onLandBkg.png) center center fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../portfolio/images/Dock.jpg', sizingMethod='scale')";
}
@media only all and (max-width: 1024px) and (max-height: 768px) {
 body {
 -moz-background-size: 1024px 768px;
 background-size: 1024px 768px;
}
}
#outerWrapper {
  margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
  text-align: left; /* Redefines the text alignment defined by the body element. */
  width: 1000px;
	background-color: transparent;
	position: relative;
}
#outerWrapper #header {
	font-size: 18px;
	font-weight: bold;
	line-height: 15px;
	padding: 0px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	background-color:#FFFFFF;
}
h1 {
	font-family:"ChopinScript","Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
	color: #D31988;font-size: 3em;
	font-style: italic;
	font-weight: lighter;
	margin-top: 30px;
}

.largeh6 {
	font-size: 5em;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Heavy", "Helvetica Inserat", "Arial Black", sans-serif;
	color: #090;
	line-height: 1em;
}

.largeh5 {
	color: #000;
	margin: 0.5em 0 0 0.25em;
}

-->
</style>


<!--<link href="page_one.php_files/portfolio.css" rel="stylesheet" type="text/css" media="screen">-->

</head>

<body>
<div id="outerWrapper">
 
  <div id="header">
    <h6 class="largeh6">Hello</h6>
    <h5 class="largeh5">welcome to the portfolio section of:</h5>
    <h1>P. Ziecina (.com)</h1>
    <p>&nbsp;</p>
  </div>
  

</div>
 


</body></html>
2

Your confusing me with this! Do you want a full page background or partly image partly color

3

one way to do it is to have a wrapper div just inside the <body> with your bg <img> in it.

set the <img> width to 100% but don’t specify a height. This will force the browser to maintain the original aspect ratio of the image when the window is resized.

set the position style of the wrapper to relative.

create another div (Content) inside the wrapper with postion set to absolute and top/left to 0. Place all your page content in Content.

and hopefully, all fingers crossed…voila…!! :slight_smile:

4

i want the background image at the top to scale the full width and keep the image depth/height proportional to the original image dimensions.

the remainder of the vertical page will be a background color.

5

then in addition to my earlier suggestion, set the body bg colour to whatever you like and the bg <img> will sit on top in the wrapper div.

6

But both css examples you gave as well as the link you provided are based on full screen backgrounds. The only thing you could change in CSS1 is the height: auto; and set it to a height, but then your proportionate scaling is out of the window.

7

lol! which is why i am asking…

i started by searching for examples to deconstruct but all my search returns were full page which i then tried to modify. but couldn’t make work the way i wanted.

8

Did you try to change the min-height property? Did you see an example somewhere?

9

this was the obvious solution to me, but i couldn’t get the “background-image: url()” to scale. i started with:

#wrapper {
background-image: url(/media/siteGraphics/onLandBkg.png);
??
??
}

but nothing i tried would size/scale a background image.

(i’d give some examples, but i tried so much that i can’t even remember what all i did now.)

10

yes, at one point i changed that to “auto”, which produced several different results across platforms/browsers, and didn’t validate. (auto wasn’t an acceptable variable.) i also tried leaving it off which made the image center vertically.

11

this works in my IE8 and FF3.6

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: green
}
 
#wrapper {
position: relative
}
 
#wrapper img {
width: 100%
}
 
#content {
position: absolute;
top: 0px;
left: 0px
}
 
</style>
</head>
<body>
 
<div id="wrapper">
       <img src="pic1.jpg" id="logo" alt="logo" />
       <div id="content">   
             <ul>
                   <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="faqs.html">FAQ'S</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>
             </ul>
 
<h2>Welcome!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet. 
Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ut 
tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Proin 
condimentum volutpat ultrices. Ut in aliquam ipsum. Donec tempor placerat feugiat. Mauris in elementum mi. 
Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Morbi sit amet sapien
ac urna hendrerit varius. Sed luctus cursus enim. Nulla vestibulum lacus quis lectus aliquet scelerisque. Sed 
vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis 
in aliquam eget, accumsan id diam. </p>
</div>
 </div>
 
</body>
</html>
12

and what if you set height the same as min height to 1024px.

13

This is basically almost not different from the CSS1 he showed with the difference that they use the min height property. Point 1 to fill the screen and point 2 to avoid scrolling when not needed

14

I’m in the middle of helping someone on another forum atm and so just answered

how do i place a page background image that scales to the width of the window with a height proportional to the original image size. the rest of the page backgrounds will be a color.

multi-tasking is not my strong suit :frowning:

think I’ll stick to one spot fire at a time :slight_smile:

15

the background displays as desired in ff3+ & safari on the mac; and in ff3.x, ie8 (i think it is 8), safari & opera on the hp.

i tried a couple of ways to center the content. one was by adding yet another div inside content but without any positioning in the hopes it would display as a default block level element. the other by fiving the oroginal content a width and left position of auto–neither worked.

here is my modified code with 800px width and left position auto, as well as the actual image and bkg color:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #4e4d30;
}

#wrapper {
position: relative
}

#wrapper img {
width: 100%
}

#content {
position: absolute;
top: 0px;
left: auto;
width: 800px;
background-color: #fff;

}

</style>
</head>
<body>

<div id="wrapper">
       <img src="http://mtouchette.com/testing/onLandBkg.png" id="logo" alt="logo" />
       <div id="content">   
             <ul>
                   <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="faqs.html">FAQ'S</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>
             </ul>

<h2>Welcome!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet.
Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ut
tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Proin
condimentum volutpat ultrices. Ut in aliquam ipsum. Donec tempor placerat feugiat. Mauris in elementum mi.
Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Morbi sit amet sapien
ac urna hendrerit varius. Sed luctus cursus enim. Nulla vestibulum lacus quis lectus aliquet scelerisque. Sed
vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis
in aliquam eget, accumsan id diam. </p>
</div>

</body>
</html>
16

this centers all the content in my IE8 and FF3.6

some of the css gurus might give you a better way of doing it.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: green
}
 
#wrapper {
position: relative
}
 
#wrapper img {
width: 100%
}
 
#content {
position: absolute;
top: 0px;
left: 0px
}
#cont_centre {
width: 80%;
border: 1px solid red;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
} 
</style>
</head>
<body>
 
<div id="wrapper">
       <img src="pic1.jpg" id="logo" alt="logo" />
       <div id="content">  
       <div id="cont_centre"> 
             <ul>
                   <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="faqs.html">FAQ'S</a></li>
                    <li><a href="contact.html">CONTACT US</a></li>
             </ul>
 
<h2>Welcome!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet. 
Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ut 
tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Proin 
condimentum volutpat ultrices. Ut in aliquam ipsum. Donec tempor placerat feugiat. Mauris in elementum mi. 
Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Morbi sit amet sapien
ac urna hendrerit varius. Sed luctus cursus enim. Nulla vestibulum lacus quis lectus aliquet scelerisque. Sed 
vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis 
in aliquam eget, accumsan id diam. </p>
</div>
</div>
 </div>
 
</body>
</html>
17

cool, thanks! :smiley:

i’ll play with it from here until i figure out how to make that work with a fixed width.

18

also for the same project but not as critical, is there a standards-based way to set an element background color opacity but still have the text at 100% opaque?

Since you stated you want to be forward facing and use CSS3, you can specify an rgba value as your background-color. But note that this will turn opaque in browsers that don’t support rgba().


#elementWithTranslucentBg {
   background-color: rgba(255,0,0,0.7);
}

This doesn’t have the same hang-up as opacity: that causes the entire element and all descendant elements to also be translucent.

19

you’re welcome :slight_smile:

and yep, I can get the content to centre only when the div width is a %. hopefully a css guru will be able to help out for a fixed width div.

20

Hi,
You can’t use auto margins on absolute positioned (AP) elements and left:auto; just means left:0 in that case.

What you really should be doing is setting the image as AP and remove it from the flow, not your content div. By leaving your content div as a static block then you can use auto margins.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
    background: #4e4d30;
}
#wrapper {
    position:relative;
}
#wrapper img#bkgrnd { /*scaling BG image*/
    position:absolute;
    width: 100%;
    top:0; left:0;
}
#content {
    overflow:hidden;/*uncollapse child margins and contain floats*/
    position:relative;
    width: 800px;
    margin:0 auto;
    background: #fff;
}

</style>
</head>
<body>

<div id="wrapper">
    <img id="bkgrnd" src="http://mtouchette.com/testing/onLandBkg.png" alt="logo" />
    <div id="content">   
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="about.html">ABOUT US</a></li>
            <li><a href="services.html">SERVICES</a></li>
            <li><a href="faqs.html">FAQ'S</a></li>
            <li><a href="contact.html">CONTACT US</a></li>
        </ul>
        <h2>Welcome!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis magna sed urna ultrices aliquet.
        Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ut
        tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Proin
        condimentum volutpat ultrices. Ut in aliquam ipsum. Donec tempor placerat feugiat. Mauris in elementum mi.
        Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Morbi sit amet sapien
        ac urna hendrerit varius. Sed luctus cursus enim. Nulla vestibulum lacus quis lectus aliquet scelerisque. Sed
        vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis
        in aliquam eget, accumsan id diam. </p>
    </div>
</div>

</body>
</html>