Need help making a background for a website that fills the screen appropriately.

[wheelstb]

Let me start by saying this is my first attempt at web design and my first real attempt to use Photoshop.

I am trying to use Photoshop to make a background for my website. But I'm running into a problem. My background is not filling the screen appropriately.

What setting should I be using to make sure that my background fits the screen well in most resolutions and in most browsers?
I have attached a picture of the webpage I am in the process of building that displays my problem.

[MotherSpider]

Don't see the attachment, try sending as a link instead. That works best here. I use gyazo to show images and I have seen a lot of people on here use another similar software. It's free and increadibly easy to use.
Now to your site issue. If you want a background image in any layer of a website it should be done in your css file with background-image and then background-repeat. If it is just one image that you do not want repeated, it will only be as big as you make the image file in this way. On this site http://www.whoopsnawards.com the background is an image that is 10px wide by 1000px high, repeated only on the x axis. This gives me a nice gradient without a heavy image to bog down the site.
There is another way to stretch an image to fit the screen, although I wouldn't suggest it and I don't believe it is viable in HTML5 so again, I would suggest not using this method. Put the image in your html file and set the width to 100%. You must have your site set up as a fluid site for this to work completely, meaning the entire page must adjust according the viewers device.
If you use the repeat in your css the background will be complete on any size and resolution computer. The content will either be a set amount (1000px suggested), or a little more difficult as a fluid. Fluid needs to be thought about as it will change the way your page is layed out according the the viewers device. Things may jump around if you do not code them in correctly.

Hope that helps

[wheelstb]

Here are two links to an image of my webpage.

http://postimage.org/image/az4prmha1/
http://s12.postimage.org/72rdvmwal/homepage_picture.jpg


How do you achieve fluidity? Let me say, I am brand-new to web design. I am also new to Dreamweaver. I have a disability and cannot type very well so I work in design view. Is that something I would be able to accomplish reasonably well in design view?


If that is not the case what else do you guys recommend that I try?

[Hoogle]

If I was you I would just add simple styling.

body{   background-image: bgname;       background-size: 100% Auto; }

The above will stretch image to 100% wide and the auto part is the height so that it maintains the aspect ratio

That way does not matter what browser, size monitor, device you are viewing the image will always take 100 % of the available space. You dont have to set it to 100% of course if you want a coloum down the center of the page you can maybe set it to 80% etc.

Centered

body {
  background-image: url("http://yoursite.com/images/image_name.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

Simplified

body {
  background: url("http://yoursite.com/images/image_name.gif") 50% 50% no-repeat;
}

and so on that is the basics many free sites out there that will dive more into css styling or html body tags but as you can see all very similar

[MotherSpider]

Yep, since it's clouds, stretching the image is fine. Use the css that Hoogle suggested. Best place to learn how to use the software, in my opinion is http://www.lynda.com Very inexpensive monthly fee and you can take as many classes as you can handle. They start from scratch and go all the way to pro.

[wheelstb]

Thanks for the help everybody. How different a try and see how it works out.

I did just pick up one of those DVDs you were talking about but I don't think it deals with website stuff.

[wheelstb]

I did get a DVD for Dreamweaver as well. I have a disability which makes typing very difficult for me, most the time I use speech recognition software but, that doesn't work with web design. So I'm trying to work in design view as much as as possible.
Anyway, the DVD I got for Dreamweaver is absolutely terrible. The guy just tells you click here, click here, click over there. There's no explanation whatsoever. You are just clicking the buttons he clicks and you are learning nothing

[MotherSpider]

Try http://www.lynda.com It's very explicative and I believe if you go with the higher price option you can get personal help. The videos seem to be good enough for me and you can always pause. I like to do the exercises while I'm watching the videos, just like going to a real school, although you can go at your own pace.

[blogfreakz]

you can try this script.. I just used this in one of my project before, hope this helps.. good luck!

[wheelstb]

If I was you I would just add simple styling.
Code:

body{ background-image: bgname; background-size: 100% Auto; }
The above will stretch image to 100% wide and the auto part is the height so that it maintains the aspect ratio

I pasted in the code that you gave me and change the background name to the name of the image I have created (bgmc.jpg)



Unfortunately, I must have done something incorrectly.



Here is a link to the screenshot of my website. It only has a white background with the background is supposed to be a multicolored image.










http://s7.postimage.org/7b45faw97/pr...background.jpg


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





Here is a copy of the code I have used.

<!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>