PDA

View Full Version : Need help making the background image fill the screen.


wheelstb
12-31-2012, 07:26 PM
Let me start by saying a new to Dreamweaver,, this is my first attempt at using it. I have a disability which makes it very difficult for me to type so, I like to work in design view as much as possible.

I am having difficulty making my background image fill the screen. Could anyone point me in the right direction?
Here is a link to a picture of my website. It is supposed to have an image in the background but instead it is all white.
http://s7.postimage.org/7b45faw97/pr...background.jpg

http://postimage.org/image/8debxuf2f/

Here is a copy of my code.
Thank you in advance I appreciate the help.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.Menuandlogo {
text-align: center;
}
ul.centreit {
text-align: left;
display: inline-block;
margin-right: auto;
margin-left: auto;
}
#contentdiv {
margin-right: auto;
margin-left: auto;
width: 650px;
}

body{ background-image: bgmc.jpg; background-size: 100% Auto; }
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:relative;
width:700px;
height:383px;
z-index:1;
left: 380px;
top: 296px;
margin-right: auto;
margin-left: auto;
}
a {
font-size: 14px;
}
a:link {
color: #0080FF;
}
a:visited {
color: #0070C0;
}
a:hover {
color: #80FFFF;
}
a:active {
color: #F00;
}
</style>
</head>
<body class="MenuBarActive">
<div class="Menuandlogo">
<img src="../4kids/logo 600.jpg" alt="Therapy 4 Kids" width="600" height="171" align="top" />
<br />
<ul id="MenuBar1" class="MenuBarHorizontal centreit">
<li><a href="Therapy 4 Kids Home-Pediatric Therapy index.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Our Services</a>
<ul>
<li><a href="Therapy 4 Kids Home-Pediatric Therapy physical therapy.html">Physical Therapy</a></li>
<li><a href="#">Occupational Therapy</a></li>
<li><a href="speach.html">Speech Therapy </a></li>
<li><a href="#">School Services</a></li>
<li><a href="#">Home Health</a></li>
</ul>
</li>
<li><a href="#">Can My Child Benefit</a> </li>
<li><a href="#">Resources</a></li>
<li><a href="#">Meet the Owners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="content wrapper" id="contentdiv">
<p>At therapy for kids our goal is to provide pediatric therapeutic treatments designed to enrich the lives of children and their families. We believe that therapy is about more than simply reaching a goal. As therapist our job is to provide your child and family with the tools and knowledge necessary to ensure that your child’s journey through life is as successful as possible.</p>
<p> We understand that pediatric therapy can be very complex, no two children or families have the same needs and aspirations. Our complete package of pediatric services includes<a href="Therapy 4 Kids Home-Pediatric Therapy physical therapy.html" class="overlink"> physical therapy,</a> <a href="o">occupational therapy</a>, <a href="Therapy 4 Kids Home-Pediatric Therapy speech therapy.html">speech therapy</a> and school services. Because we offer a wide variety of services we will be able to meet all of your current needs and continue to help in the future as the needs of your family progress and evolve. What sets us apart from other healthcare providers is we provide therapeutic solutions that meet your family’s needs in the comfort of your own home.</p>
<p>If you’re visiting our website for the first time you may find yourself overwhelmed, unsure where to turn or what to do next. We are here to help. We have all the resources you need to get your child set up for their first visit.</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Ricky55
01-01-2013, 12:47 PM
There are a few reasons why this is happening.

1. Your background image, is this in the same folder as your HTML page?
2. How big is the image does it need to repeat?
3. Not sure if the background size is correct never used this.

Could you show us the image you want to use and ill be able to tell you more. Or better still just upload the site to a server.

wheelstb
01-02-2013, 11:08 PM
There are a few reasons why this is happening.

1. Your background image, is this in the same folder as your HTML page?
2. How big is the image does it need to repeat?
3. Not sure if the background size is correct never used this.

Could you show us the image you want to use and ill be able to tell you more. Or better still just upload the site to a server.

Thank you for the help I truly appreciate it.

1. The background image is in the same folder as the HTML file.

2. The images 1280 pixels wide by 1024 pixels tall.

3. Here is a link to my image. I can't type very well due to a disability, I prefer to use Dreamweaver and design. I volunteered to try to build a website for an organization that I work with. It was my first attempt at web design and it could very well be my last attempt. So I really do not want to buy server hosting services. Plus the organization I am building the website for doesn't want to pay for any hosting until the website is finished. (They do not want anyone to be able to see the website until it is complete."

http://postimage.org/image/t5jcgr10r/
http://s9.postimage.org/gqwkgf9in/bgmc.jpg

wheelstb
01-03-2013, 01:12 AM
I was able to figure it out. There were a few HTML
errors and placement errors that were causing a problem