# Background image auto-fit in window size



## TheTrueMaverick

Hi, I have been googling myself about this but I am still not quite sure how to pull this off.

I have a very large image in the background (I just used a random one for now to test around), and I got it to fit in the window without any scroll bars and whatnot.

And now, I'm trying to get the image to fit in the screen, like shrink the image down to the resolution the PC is using.

Is there a way without using Javascript...?

Thank you kindly.



Code:


<!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=shift_jis" />

<style type="text/css">

<!--
#bg{	
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:absolute;
	background-image:url([url]http://www.wallpaperbase.com/wallpapers/3d/3dlandscape/3d_landscape_64.jpg);[/url]
}

#content{	
	margin-left:auto;
	margin-right:auto;
	width:750px;
}
#navi{	
	border:1px #010101 dotted;
	list-style-type:none;
	text-align:center;
}
#navi li{
	display:inline;
}
p, h1, h2, h3, h4, h5, ul, li{
	margin:0px;
	padding:0px;
}

-->

</style>

<title>BCNF</title>

</head>

<body>
<div id="bg">
<ul id="navi">
	<li><font color="white">Main</font></li>
	<li>|</li>
	<li>Gallery</li>
	<li>|</li>
	<li>Biography</li>
	<li>|</li>
	<li>Media</li>
	<li>|</li>
	<li>Links</li>
</ul>
<div id="content">
	<h1>test</h1>
	<p>test</p>
</div>
</div>

</body>

</html>


----------



## tomdkat

Is this what you're after?

Peace...


----------



## TheTrueMaverick

Hey,

I've looked at the website.

They seem to use <img> rather than setting the image in CSS.

I tried their way, by having










...
...

#bg { z-index:0; }
#navi{ z-index:10; }
#content{ z-index:10; }

with rest the same, but all I see is a background image and doesn't seem to resize...

I'm a bit confused here really..


----------



## tomdkat

First, is that example what you're after? If so, study the CSS for the image. The trick is to use 100% width and height for the background image.

Here is a watered down example:


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Scaling background</title>
  <style type="text/css">
html, body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  padding-top: 0px;
  top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  left: 0px;
}
body {
  overflow: hidden;
}
#background {
  width: 100%;
  height: 100%;
}

  </style>
</head>
<body>
<img id="background" alt="background" src="flower-wallpaper.jpg">
</body>
</html>

Replace "flower-wallpaper.jpg" with the image of your choice and watch it scale as the browser window is resized. 

EDIT: Attached are some screenshots of my above HTML displayed in Opera 9.51 on Windows XP. Notice the two different browser window sizes and how the image scales.

Peace...


----------



## TheTrueMaverick

Thank you! That really helps 

Although, I still am having trouble pushing the background to the back after fiting is involved... I have been to the w3school website, and read about z-index but it just seems to just kill my background image completely.

Also, for some reason the top and left 0pixel I applied in the body tag seems to die..



Code:


<!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=shift_jis" />

<style type="text/css">

<!--
body{
	overflow:hidden;
	top:0px;
	left:0px;
}
#bg{
	width:100%;
	height:100%;
	position:absolute;
	z-index:-1;
}
#content{	
	margin-left:auto;
	margin-right:auto;
	width:750px;
}
#navi{	
	border:1px #010101 dotted;
	list-style-type:none;
	text-align:center;
}
#navi li{
	display:inline;
}
p, h1, h2, h3, h4, h5, ul, li{
	margin:0px;
	padding:0px;
}

-->

</style>

<title>BCNF</title>

</head>

<body>
<img id="bg" src="http://www.arfsrestaurant.com/images/food/sandwiches/bacon%20cheeseburger%202.JPG" />
<ul id="navi">
	<li><font color="white">Main</font></li>
	<li>|</li>
	<li>Gallery</li>
	<li>|</li>
	<li>Biography</li>
	<li>|</li>
	<li>Media</li>
	<li>|</li>
	<li>Links</li>
</ul>
<div id="content">
	<h1>test</h1>
	<p>test</p>
</div>

</body>

</html>

Any ideas on that one?

http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex2

That's the w3 page I looked at.


----------



## tomdkat

Ok, now that you have a scaling background image with an absolute position, you need to put your content in another DIV with a higher z-index.

Check out this example:


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Scaling background</title>
  <style type="text/css">
html, body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  padding-top: 0px;
  top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  left: 0px;
}
body {
  overflow: hidden;
}
#background {
  width: 100%;
  height: 100%;
  display: block;
[b]  position: absolute;
  z-index: 1;[/b]
}
.content {
  border-style: solid;
  border-color: red;
[b]  display: block;
  position: relative;
  z-index: 5;[/b]
  width: 80%;
  margin-right: auto;
  margin-left: auto;
  background-color: #ccffff;
  opacity: 0.697;
}

  </style>
</head>
<body>
<div><img id="background" alt="background"
 src="flower-wallpaper.jpg"></div>
<div class="content">Content goes here!!!!!<br>
</div>
</body>
</html>

Peace...


----------



## TheTrueMaverick

Wow, the whole position:relative; and position:absolute combination seems to be quite important...

If you just apply z-index on its own, it doesn't seem to work but I wonder why...?

Also, I also was curious, would this be possible to apply if I set the background image in CSS like in the first code of mine rather than having an image tag.

Thank you again!


----------



## TheTrueMaverick

Big thanks to Tomdkat,

I now have an almost working site, but now, if the content part gets extremely long as shown below, the scroll bar seem to stop at "24 scroll preview" and 25, 26 are chopped.

Screenshot of the actual site



Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- www.ensamvargdesign.com -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
<!--
body{
	overflow:hidden;
	font-size:12px;
}
#bg{
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:block; /*!*/
	position:absolute;
	z-index:1;
}
#navi{	
	border:1px #010101 dotted;
	list-style-type:none;
	text-align:center;
	z-index:5;
	display:block; /*!*/
	position:relative;

	background-color:#FFFFFF;
	opacity:0.8;
	filter:alpha(opacity=80);

	margin-bottom:10px;
}
#navi li{
	display:inline;
}
#content{	
	margin-left:auto;
	margin-right:auto;
	width:800px;
	z-index:5;
	display:block; /*!*/
	position:relative;
	
	background-color:#FFFFFF;
	opacity:0.65;
	filter:alpha(opacity=65);

	color:#000000;
}
#scroller{
	margin-top:10px;
	position:absolute;
	width:100%;
	height:100%;
	overflow:auto;
	z-index:5;
	left:0;
}
#content h2{
	padding-left:80px;
}
#content p{
	padding-left:100px;
	padding-right:100px;
}
#content li{
	text-align:center;
	margin-top:5px;
	list-style-type:none;
}
p, h1, h2, h3, h4, h5, ul, li{
	margin:0px;
	padding:0px;
}
-->
</style>
<title>Siren On preview</title>
</head>
<body>
<img id="bg" src="high-res6.jpg" />
<ul id="navi">
	<li>Main</li>
	<li>|</li>
	<li>Gallery</li>
	<li>|</li>
	<li>Biography</li>
	<li>|</li>
	<li>Media</li>
	<li>|</li>
	<li>Links</li>
</ul>
<div id="scroller">
<div id="content">
	<h2>What is Lorem Ipsum?</h2>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	<h2>Where does it come from?</h2>
	<p>roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
	<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
	<h2>Why do we use it?</h2>
	<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
	<h2>Where can I get some?</h2>
	<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
	
<ul>
	<li>1 scroll preview</li>
	<li>2 scroll preview</li>
	<li>3 scroll preview</li>
	<li>4 scroll preview</li>
	<li>5 scroll preview</li>
	<li>6 scroll preview</li>
	<li>7 scroll preview</li>
	<li>8 scroll preview</li>
	<li>9 scroll preview</li>
	<li>10 scroll preview</li>
	<li>11 scroll preview</li>
	<li>12 scroll preview</li>
	<li>13 scroll preview</li>
	<li>14 scroll preview</li>
	<li>15 scroll preview</li>
	<li>16 scroll preview</li>
	<li>17 scroll preview</li>
	<li>18 scroll preview</li>
	<li>19 scroll preview</li>
	<li>20 scroll preview</li>
	<li>21 scroll preview</li>
	<li>22 scroll preview</li>
	<li>23 scroll preview</li>
	<li>24 scroll preview</li>
	<li>25 scroll preview</li>
	<li>26 scroll preview</li>
</ul>
</div></div>

</body>
</html>


----------



## tomdkat

TheTrueMaverick said:


> Wow, the whole position:relative; and position:absolute combination seems to be quite important...


Yep.



> If you just apply z-index on its own, it doesn't seem to work but I wonder why...?


z-index applies only to positioned elements.



> Also, I also was curious, would this be possible to apply if I set the background image in CSS like in the first code of mine rather than having an image tag.


Unfortunately, you can't specify the size of background image in CSS1 or CSS2. I *think* that might be possible in CSS3, but I'm not sure. By using an img element, we can scale the image to the full height and width of the viewport (the part of the browser window that displays the page).

Peace...


----------



## tomdkat

TheTrueMaverick said:


> I now have an almost working site, but now, if the content part gets extremely long as shown below, the scroll bar seem to stop at "24 scroll preview" and 25, 26 are chopped.


Yep, that's because of this:



Code:


<style type="text/css">
<!--
body{
[b]	overflow:hidden;[/b]
	font-size:12px;
}

The "overflow: hidden" hides the scroll-bars. Read up on the "overflow" CSS rule to determine how to use it appropriately for your needs. 

Peace...


----------

