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

wheelstb

Active Member
#1
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.
 
#2
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

Active Member
#3
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?
 
#4
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

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
Code:
body {
  background-image: url("http://yoursite.com/images/image_name.gif");
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
Simplified
Code:
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
 
#5
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.
:thumbsup:
 

wheelstb

Active Member
#6
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

Active Member
#7
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
 
#8
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.
 
#10
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/propper_background.jpg


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





Here is a copy of the code I have used.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<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>
 
Last edited:
#11
I guess you don't have the image in the same folder as the html document. You should make a folder called image in the same path as the html document.

Code:
body {
background-image:url(images/bgmc.jpg);
background-size:100% auto;
}
Untitled-1.png
 
Last edited:

wheelstb

Active Member
#12
I should have included this in my post. That was my first thought when I ran into the problem and the first thing I checked. The image is in the same folder as the HTML documents.
I will give it another try doing what you have suggest and report back with how it works.
Thanks I appreciate the help
 

wheelstb

Active Member
#13
I guess you don't have the image in the same folder as the html document. You should make a folder called image in the same path as the html document.

Code:
body {
background-image:url(images/bgmc.jpg);
background-size:100% auto;
}
View attachment 25911


This is probably a really a really stupid question. But like a saod I am very new to web design. Where in my code should I place the code that you gave me. I tried pasting it after the ending head tag but, if I do that it simply shows up as text on my webpage. On the previous page is a copy of my website code.

Thanks so much. I really appreciate all the help that everyone has given me.
 

wheelstb

Active Member
#15
Thanks. I'm sure that was a stupid question. Now I have a another. As I was looking at the code to my website I noticed there is a closing body tag but no opening tag. Should I just put the opening tag right after the ending head tag?

Thank you again I appreciate the help.
 
#16
There is one, let me tell some css basic, first you name the element (in your case body) than you have that sing as shown below, this is your "opening tag" saying there will be some properties like width or height ect. than there is another sign wich closes your code. You'll notice that CSS is not responding to uppercase letters and white spaces. Take a look at the example below.

Code:
element [B]{
[/B]element:properties;
[B]}[/B]
EDIT:
I see you gave the body tag in your head section an class, you should remove that class!
 
Last edited:

wheelstb

Active Member
#17
Thank you so much for the help. I was finally able to accomplish what I was trying to do. I think it was a series of idiot mistakes that was keeping me from accomplishing what I was trying to accomplish.
Thank you again to everyone for the help I truly do appreciate it.
 
#18
Pleasure to help you, everybody has to start somewhere right? ;)

There is another tool to check if your code is right called wc3 validator this tool checks your code for any mistakes, so that might be usefull as well. :)