Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Web Design & Development Web Design & Development
Search Search
Search for:
Tech Support Guy > > >

Background image auto-fit in window size


(!)

TheTrueMaverick's Avatar
TheTrueMaverick TheTrueMaverick is offline
Computer Specs
Member with 33 posts.
THREAD STARTER
 
Join Date: Aug 2006
Location: Japan
Experience: Intermediate
19-Aug-2008, 06:15 PM #1
Background image auto-fit in window size
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(http://www.wallpaperbase.com/wallpap...scape_64.jpg);
}

#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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
19-Aug-2008, 06:17 PM #2
Is this what you're after?

Peace...
TheTrueMaverick's Avatar
TheTrueMaverick TheTrueMaverick is offline
Computer Specs
Member with 33 posts.
THREAD STARTER
 
Join Date: Aug 2006
Location: Japan
Experience: Intermediate
19-Aug-2008, 06:29 PM #3
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

<div id="bg"><img src="..." /></div>
<ul id="navi">...</ul>
<div id="content">...</div>

#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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
19-Aug-2008, 06:52 PM #4
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...
Attached Thumbnails
Background image auto-fit in window size-opera-scale1.jpg   Background image auto-fit in window size-opera-scale2.jpg  

Last edited by tomdkat; 19-Aug-2008 at 06:57 PM.. Reason: Added screenshot attachment
TheTrueMaverick's Avatar
TheTrueMaverick TheTrueMaverick is offline
Computer Specs
Member with 33 posts.
THREAD STARTER
 
Join Date: Aug 2006
Location: Japan
Experience: Intermediate
19-Aug-2008, 07:07 PM #5
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.a...trycss_zindex2

That's the w3 page I looked at.
tomdkat's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
19-Aug-2008, 07:12 PM #6
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;
  position: absolute;
  z-index: 1;
}
.content {
  border-style: solid;
  border-color: red;
  display: block;
  position: relative;
  z-index: 5;
  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's Avatar
TheTrueMaverick TheTrueMaverick is offline
Computer Specs
Member with 33 posts.
THREAD STARTER
 
Join Date: Aug 2006
Location: Japan
Experience: Intermediate
19-Aug-2008, 07:20 PM #7
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's Avatar
TheTrueMaverick TheTrueMaverick is offline
Computer Specs
Member with 33 posts.
THREAD STARTER
 
Join Date: Aug 2006
Location: Japan
Experience: Intermediate
19-Aug-2008, 08:52 PM #8
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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
19-Aug-2008, 10:48 PM #9
Quote:
Originally Posted by TheTrueMaverick View Post
Wow, the whole position:relative; and position:absolute combination seems to be quite important...
Yep.

Quote:
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.

Quote:
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's Avatar
Computer Specs
Trusted Advisor with 7,141 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
19-Aug-2008, 10:50 PM #10
Quote:
Originally Posted by TheTrueMaverick View Post
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{
	overflow:hidden;
	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...
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


Tags
css

(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑

Content Relevant URLs by vBSEO 3.3.2