Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

CSS background image and margind

Posted on 2009-04-14
4
Medium Priority
?
468 Views
Last Modified: 2012-06-22
Hi All,
I am getting there with all the help ypu guys have been giving me.  I have a css layout for my site that is just about perfect except for two things.  First I would like to add a backgrounfg image that does not scroll when i scroll the text.  In my previous version of the site I used tables to layout the structure and had a background image that was just what i wanted, again thanks to the help I got here.  But the same method doesn't work when I use css for the lay out/  The image appears on top ot the text and block most of the site.  If you remove the
<img id="background" title="Sunrise" style="left: 1px; top: 3px;" alt="" src="sunrise.jpg">
line of code you can see the rest of the site fine.  Obviously I beed to add the Ibackground image to the css code but I don't know how or where to put it.

The second problem is the spacing between the top of the screen and the Title.  It is just about twice what I would like as if the spacing between the title "<div id="container">  </div?>" and the following text.

Sure will appreciate some answers.
Thabks
Dick Roose
This is the html code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="sample.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="This site provides a multitude of low cost Internet and home business opportunities along with all the resources you will need to create and grow your Internet or home based business.  Here you will find both free and low cost web sites and web site designs to get you started at a minimum cost.  We also offer free and low cost advertising and marketing resources and training.  We specialize in providing the lowest start up cost and a wealth of free and low cost advertising and marketing resources to get you on your way to generating income>
<meta name="keywords" content="free, low cost, Internet, business, opportunities, advertising, marketing, Home, Internet business, Home business, Internet business opportunities, Home business opportunities, Internet business resources, Home business resources, Internet marketing, Home business marketing, Internet advertising, Home business advertising, free web site, low cost web site, free web site design, low cost web site design> 
<meta name="revisit-after" content="7 days"> 
<meta content="MSHTML 6.00.5730.13" name="GENERATOR">
<title>Low cost Internet and home business opportunities and resources for Internet and home based income producing opportunities.</Title>
</head>
 
 
<body>
<img id="background" title="Sunrise" style="left: 1px; top: 3px;" alt="" src="sunrise.jpg"> 
<div id="container">
<DIV align=center>
<br>
<SPAN class="fnt1">AMAZING HOME VENTURES</SPAN><BR>
<SPAN class="fnt2">The Ultimate Internet and Home Business Store </SPAN><BR>
<SPAN class="fnt3"><a href="COMPLETE_INTERNET_HOME_BUSINESS.html" target="_blank">COMPLETE INTERNET HOME BUSINESS $99</a></SPAN><BR>
<hr style="width: 100%; height: 2px;">
</DIV>
</div>
<div id="leftnav">
<a href="http://www.drinkactweb.com/ahv"><img src="banner2.jpg" alt="Join the Energy Revolution" border="0"/></a>
 
</div>
<div id="rightnav">
<a href="http://www.drinkactweb.com/ahv"><img src="banner2.jpg" alt="Join the Energy Revolution" border="0"/></a>
</div>
<div id="content" align="center">
<SPAN class="fnt3"><a href="Guide.html" target="_blank">The Ultimate Guide to Home Business Start Ups!</a></SPAN><br>
<SPAN class="fnt4">A step by step blueprint for planning and starting your own business.  Providing 
the lowest start up cost, the best business opportunities and a wealth of free and low cost 
advertising and marketing resources to get your Business online and generating income in the 
shortest possible time.</SPAN><br> 
<hr style="width: 100%; height: 2px;">
<SPAN class="fnt3"><a href="Blog.html" target="_blank">The Home Business Blog.</a></SPAN>
<br>Get the most up to date information on the world of Internet Home Business.  A forum where you can share your 
experiences and read about the experiences of others.  A place to go if you have questions about
any aspect of your business.</SPAN><br>
<hr style="width: 100%; height: 2px;">
<a href="Low_Cost_Home_Business_Opportunities.html" target="_blank">Low Cost Internet and Home Business Opportunities</a><br>
<a href="Low_Cost_Advertising_Marketing_Resources.html" target="_blank">Low Cost Advertising and Marketing Resources</a><br> 
<a href="Low_Cost_Web_Hosting.html" target="_blank">Low Cost Web Hosting and Web Site Design</a><br> 
<a href="Free_Business_Training.html" target="_blank">Totally Free Internet Business Training</a><br>
</div><br> 
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
 
This is the css code
CSS CODE
a:link { 
	color: #0000FF;
	}
a:visited { 
	color: #9F00FF;
	}
a:hover { 
	color: #00C0FF;
	}
a:active { 
	color: #000000;
	}
#background {
	Z-INDEX: 1; WIDTH: 100%; POSITION: absolute; HEIGHT: 100%
}
#scroller {
	Z-INDEX: 2; LEFT: 0px; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
#content {
	PADDING-RIGHT: 30px; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; PADDING-TOP: 5px
}
P {
	LINE-HEIGHT: 1.8em; LETTER-SPACING: 0.1em; 
}
.fnt1 {
	  FONT-SIZE: 250%; COLOR: #FFCC00; FONT-FAMILY: Algerian
}
.fnt2 {
	  FONT-SIZE: 180%; COLOR: #000000; FONT-FAMILY: Algerian
}
.fnt3 {
	FONT-SIZE: 145%; COLOR: #000000; FONT-FAMILY: arial
}
.fnt4 {
	FONT-SIZE: 100%; COLOR: #000000; FONT-FAMILY: arial
}
.fnt5 {
	FONT-SIZE: 200%; COLOR: #FF0000; FONT-FAMILY: arial
}
#fixed {
	BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 10px; Z-INDEX: 10; LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #000 1px solid; WIDTH: 150px; COLOR: #567; PADDING-TOP: 10px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 25px
 
} #container
{
width: 100%;
margin: 10px auto;
}
 
#leftnav
{
float: left;
width: 120px;
margin: 0;
padding: 1em;
}
 
#rightnav
{
float: right;
width: 120px;
margin: 0;
padding: 1em;
}
 
#content
{
margin-left: 140px;
margin-right: 140px;
padding: 1em;
max-width: 36em;
}
 
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
 
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

Open in new window

Sunrise.jpg
0
Comment
Question by:dr_roose
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24145703
This is the code for Image to appear in the background.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="sample.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<meta content="MSHTML 6.00.5730.13" name="GENERATOR">
<title>Low cost Internet and home business opportunities and resources for Internet and home based income producing opportunities.</Title>
<style>
a:link {
      color: #0000FF;
      }
a:visited {
      color: #9F00FF;
      }
a:hover {
      color: #00C0FF;
      }
a:active {
      color: #000000;
      }
#background {
      Z-INDEX: 1; WIDTH: 100%; POSITION: absolute; HEIGHT: 100%
}
#scroller {
      Z-INDEX: 2; LEFT: 0px; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
#content {
      PADDING-RIGHT: 30px; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; PADDING-TOP: 5px
}
P {
      LINE-HEIGHT: 1.8em; LETTER-SPACING: 0.1em;
}
.fnt1 {
        FONT-SIZE: 250%; COLOR: #FFCC00; FONT-FAMILY: Algerian
}
.fnt2 {
        FONT-SIZE: 180%; COLOR: #000000; FONT-FAMILY: Algerian
}
.fnt3 {
      FONT-SIZE: 145%; COLOR: #000000; FONT-FAMILY: arial
}
.fnt4 {
      FONT-SIZE: 100%; COLOR: #000000; FONT-FAMILY: arial
}
.fnt5 {
      FONT-SIZE: 200%; COLOR: #FF0000; FONT-FAMILY: arial
}
#fixed {
      BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 10px; Z-INDEX: 10; LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #000 1px solid; WIDTH: 150px; COLOR: #567; PADDING-TOP: 10px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 25px
 
} #container
{
width: 100%;
margin: 10px auto;
}
 
#leftnav
{
float: left;
width: 120px;
margin: 0;
padding: 1em;
}
 
#rightnav
{
float: right;
width: 120px;
margin: 0;
padding: 1em;
}
 
#content
{
margin-left: 140px;
margin-right: 140px;
padding: 1em;
max-width: 36em;
}
 
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
 
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

</style>
</head>
 
 
<body style="background-image:url(Sunrise.jpg); background-repeat: no-repeat; left: 1px; top: 3px;">

<div id="container">
<DIV align=center>
<br>
<SPAN class="fnt1">AMAZING HOME VENTURES</SPAN><BR>
<SPAN class="fnt2">The Ultimate Internet and Home Business Store </SPAN><BR>
<SPAN class="fnt3"><a href="COMPLETE_INTERNET_HOME_BUSINESS.html" target="_blank">COMPLETE INTERNET HOME BUSINESS $99</a></SPAN><BR>
<hr style="width: 100%; height: 2px;">
</DIV>
</div>
<div id="leftnav">
<a href="http://www.drinkactweb.com/ahv"><img src="banner2.jpg" alt="Join the Energy Revolution" border="0"/></a>
 
</div>
<div id="rightnav">
<a href="http://www.drinkactweb.com/ahv"><img src="banner2.jpg" alt="Join the Energy Revolution" border="0"/></a>
</div>
<div id="content" align="center">
<SPAN class="fnt3"><a href="Guide.html" target="_blank">The Ultimate Guide to Home Business Start Ups!</a></SPAN><br>
<SPAN class="fnt4">A step by step blueprint for planning and starting your own business.  Providing
the lowest start up cost, the best business opportunities and a wealth of free and low cost
advertising and marketing resources to get your Business online and generating income in the
shortest possible time.</SPAN><br>
<hr style="width: 100%; height: 2px;">
<SPAN class="fnt3"><a href="Blog.html" target="_blank">The Home Business Blog.</a></SPAN>
<br>Get the most up to date information on the world of Internet Home Business.  A forum where you can share your
experiences and read about the experiences of others.  A place to go if you have questions about
any aspect of your business.</SPAN><br>
<hr style="width: 100%; height: 2px;">
<a href="Low_Cost_Home_Business_Opportunities.html" target="_blank">Low Cost Internet and Home Business Opportunities</a><br>
<a href="Low_Cost_Advertising_Marketing_Resources.html" target="_blank">Low Cost Advertising and Marketing Resources</a><br>
<a href="Low_Cost_Web_Hosting.html" target="_blank">Low Cost Web Hosting and Web Site Design</a><br>
<a href="Free_Business_Training.html" target="_blank">Totally Free Internet Business Training</a><br>
</div><br>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 2000 total points
ID: 24145713
Final code resolving both the issues :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="sample.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<meta content="MSHTML 6.00.5730.13" name="GENERATOR">
<title>Low cost Internet and home business opportunities and resources for Internet and home based income producing opportunities.</Title>
<style>
a:link {
      color: #0000FF;
      }
a:visited {
      color: #9F00FF;
      }
a:hover {
      color: #00C0FF;
      }
a:active {
      color: #000000;
      }
#background {
      Z-INDEX: 1; WIDTH: 100%; POSITION: absolute; HEIGHT: 100%
}
#scroller {
      Z-INDEX: 2; LEFT: 0px; OVERFLOW: auto; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
#content {
      PADDING-RIGHT: 30px; PADDING-LEFT: 20px; PADDING-BOTTOM: 20px; PADDING-TOP: 5px
}
P {
      LINE-HEIGHT: 1.8em; LETTER-SPACING: 0.1em;
}
.fnt1 {
        FONT-SIZE: 250%; COLOR: #FFCC00; FONT-FAMILY: Algerian
}
.fnt2 {
        FONT-SIZE: 180%; COLOR: #000000; FONT-FAMILY: Algerian
}
.fnt3 {
      FONT-SIZE: 145%; COLOR: #000000; FONT-FAMILY: arial
}
.fnt4 {
      FONT-SIZE: 100%; COLOR: #000000; FONT-FAMILY: arial
}
.fnt5 {
      FONT-SIZE: 200%; COLOR: #FF0000; FONT-FAMILY: arial
}
#fixed {
      BORDER-RIGHT: #000 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #000 1px solid; PADDING-LEFT: 10px; Z-INDEX: 10; LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #000 1px solid; WIDTH: 150px; COLOR: #567; PADDING-TOP: 10px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 25px
 
} #container
{
width: 100%;
margin: 10px auto;
}
 
#leftnav
{
float: left;
width: 120px;
margin: 0;
padding: 1em;
}
 
#rightnav
{
float: right;
width: 120px;
margin: 0;
padding: 1em;
}
 
#content
{
margin-left: 140px;
margin-right: 140px;
padding: 1em;
max-width: 36em;
}
 
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
 
#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

</style>
</head>
 
 
<body style="background-image:url(Sunrise.jpg); background-repeat: no-repeat; left: 1px; top: 3px;">

<div id="container">
<DIV align=center>

<SPAN class="fnt1">AMAZING HOME VENTURES</SPAN><BR>
<SPAN class="fnt2">The Ultimate Internet and Home Business Store </SPAN><BR>
<SPAN class="fnt3"><a href="COMPLETE_INTERNET_HOME_BUSINESS.html" target="_blank">COMPLETE INTERNET HOME BUSINESS $99</a></SPAN><BR>
<hr style="width: 100%; height: 2px;">
</DIV>
</div>
<div id="leftnav">
<a href="http://www.drinkactweb.com/ahv"><img src="banner2.jpg" alt="Join the Energy Revolution" border="0"/></a>
 
</div>
<div id="rightnav">
<a href="http://www.drinkactweb.com/ahv"><img src="banner2.jpg" alt="Join the Energy Revolution" border="0"/></a>
</div>
<div id="content" align="center">
<SPAN class="fnt3"><a href="Guide.html" target="_blank">The Ultimate Guide to Home Business Start Ups!</a></SPAN><br>
<SPAN class="fnt4">A step by step blueprint for planning and starting your own business.  Providing
the lowest start up cost, the best business opportunities and a wealth of free and low cost
advertising and marketing resources to get your Business online and generating income in the
shortest possible time.</SPAN><br>
<hr style="width: 100%; height: 2px;">
<SPAN class="fnt3"><a href="Blog.html" target="_blank">The Home Business Blog.</a></SPAN>
<br>Get the most up to date information on the world of Internet Home Business.  A forum where you can share your
experiences and read about the experiences of others.  A place to go if you have questions about
any aspect of your business.</SPAN><br>
<hr style="width: 100%; height: 2px;">
<a href="Low_Cost_Home_Business_Opportunities.html" target="_blank">Low Cost Internet and Home Business Opportunities</a><br>
<a href="Low_Cost_Advertising_Marketing_Resources.html" target="_blank">Low Cost Advertising and Marketing Resources</a><br>
<a href="Low_Cost_Web_Hosting.html" target="_blank">Low Cost Web Hosting and Web Site Design</a><br>
<a href="Free_Business_Training.html" target="_blank">Totally Free Internet Business Training</a><br>
</div><br>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
0
 

Author Comment

by:dr_roose
ID: 24147695
Hey Guys,
You got the image in the background but it is too tall for the display. I can only see the top part of it and the bottom part is off screen.  Is there any way to force it to resize the image so it fiots the screen as it did in the old way with tables?
0
 

Author Closing Comment

by:dr_roose
ID: 31570263
Thanks
0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question