PDA

View Full Version : How to make a background hug the sides of the page in Dreamweaver?


wheelstb
12-02-2012, 04:18 AM
Let me start off by saying I have a disability that prevents me from typing well so, I like to work in design view as much as possible.

I would like to set up a background for all of the pages in my website that goes vertically down the page. I don't want to cover the whole page, maybe just a couple of hundred pixels on the left and right sides. I was thinking it might be done by using some sort of div but I'm not sure how you would make it continuous that was just my best guess anyway.

I'm very new with Dreamweaver but I am trying to learn as much as I can. Can anyone show me how to do this?

Thank you in advance for the help, I truly do appreciate it.

Corrosive
12-02-2012, 09:16 AM
You can set an image as the background of the <body> tag which will be on all pages. Once done you'll need to work out positioning and repeating to make it work correctly. All of this can be done through the CSS and Properties panels when using Design View. Hope that helps.

wheelstb
12-02-2012, 07:21 PM
This does help. I really appreciate the quick and helpful response. I will try that and let you know how it goes.

wheelstb
12-04-2012, 04:45 AM
I think I followed your advice to the letter. Under the background option I have background repeat set to repeat-y and I have background position x set to left. This configuration allows me to have the background on either the left or right side. Not on both sides.

What might I need to do differently?

I tried to wrap everything in a div, thinking that I could use my background image for the main background and use the left and right margin settings of the div to pull the content away from the sides. I struggled with it for a while and was unable to make it work. Was I on the right track?
Thank you to everyone in advance.

Corrosive
12-04-2012, 09:04 AM
I'm not sure what you have done there. The body tag naturally fills out the rest of the page if you set a background through CSS. Can you get a test environment set up online where you can upload links to the work you are doing? It would help us a lot when guiding you through the process :)

wheelstb
12-05-2012, 08:27 PM
I'm not sure what you have done there. The body tag naturally fills out the rest of the page if you set a background through CSS. Can you get a test environment set up online where you can upload links to the work you are doing? It would help us a lot when guiding you through the process :)


I would love to set up a test environment but, I'm not sure how or what is the best way to do that.





The company I am working with has not purchased a domain name yet and I don't want to make them do so until I am completely ready to launch the website.


If you could tell me how I go about doing this, I would be more than happy to do so. I think it would be really handy .

Corrosive
12-06-2012, 08:07 AM
You could just buy a development domain and use that. Assuming you want to continue to learn more about web design then your own corner of the web is no bad thing :)

domedia
12-06-2012, 01:50 PM
The company I am working with has not purchased a domain name yet and I don't want to make them do so until I am completely ready to launch the website.

This makes no sense at all. :neutral:

wheelstb
12-06-2012, 04:33 PM
This makes no sense at all. :neutral:

I'm thinking that there's a chance I might not be able to get the job done. I didn't want them to be stuck with a domain and no website to go with it.

But now that I really give it some thought having my own domain is not such a bad idea.

Quick question-if I am going to buy a domain name for a little experimentation is there any advantage in going with a particular host over another for that situation?

Corrosive
12-06-2012, 05:07 PM
Quick question-if I am going to buy a domain name for a little experimentation is there any advantage in going with a particular host over another for that situation?

Just make sure they have the tools you need now and might need in the future. I'd go for Linux hosting with cPanel and definitely PHP and PHPmyadmin. You should also look out for free MySQL databases. You may not need them now but you will :)

wheelstb
12-06-2012, 06:53 PM
I'm thinking about Go Daddy. I think they have all the specifications that you mentioned. Is there anything I should watch out for if d go with Go Daddy?

domedia
12-06-2012, 09:26 PM
I would advice against it, they do not have the best reputation for hosting.

This site is hosted by site5.com and I can't remember having to contact them about anything for years.

I'm sure others can recommend their favorite hosting companies as well :)

wheelstb
12-06-2012, 09:39 PM
I would advice against it, they do not have the best reputation for hosting.

This site is hosted by site5.com and I can't remember having to contact them about anything for years.

I'm sure others can recommend their favorite hosting companies as well :)


Okay, thanks for the advice. I'll take that into consideration.

wheelstb
12-06-2012, 09:52 PM
I'm trying to complete this website for the organization by the first of the year. I've asked them how they want to handle
procuring a website and URL.

 

 



Right now I'm not sure about getting my own hosted account and domain name because I'm not sure I want to continue with my web design efforts after this project.

 

 

That being said, does anyone have any more ideas on my original question? I can get the background image to hug either the left or right side but, not both sides at the same time.

In the CSS styles screen under the background setting I have it set to repeat on the y-axis and the
x: position is set to right.

Any help would be greatly appreciated.

Below is my code.



<!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: 1000px;
}
body {
background-color: #F0F0F0;
background-image: url(sky2.jpg);
background-repeat: repeat-y;
background-position: right;
}
</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;
}
</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="#">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Our Services</a>
<ul>
<li><a href="#">Physical Therapy</a></li>
<li><a href="#">Occupational Therapy</a></li>
<li><a href="#">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.<br />
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 physical therapy, occupational therapy, speech therapy 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>

Corrosive
12-07-2012, 09:13 AM
Oh I kind of see what you mean now. You almost want to stretch the background image to fit. You can do this using CSS3 background size property; http://webdesign.about.com/od/css3/f/blfaqbgsize.htm but you must be aware of which browsers this will work in. For folks who are hanging on grimly to their copy of IE8 it won't work. There are some javascript methods and hacks around but you can Google those. The 'norm' is to choose a background that can repeat along the x axis and then just let it fill the page that way.

wheelstb
12-07-2012, 07:18 PM
I don't think we are on the same page here. Mostly because I'm doing a terrible job of explaining what I want to accomplish. I'm really thinking that what I want to accomplish will not be able to be done without a high degree of Photoshop skill.



Can anyone recommend a good way or ideas to make the unique but professional looking background Without having a tremendous amount of skill?
 
 
I tried to create a fading gradient but I was never able to give it to fill the page. It always was right in the middle of my content
div no matter how I tried to get around that.

wheelstb
12-07-2012, 07:19 PM
I would also like to stick with something that would be reasonably compatible for people with various browsers

jmichae3
12-08-2012, 10:07 AM
best way I know of if it's simply a repeating vertical pattern(even if it's 1px high), is to use

background-repeat:repeat-y;
background-image:url(image/blah.jpg);

repeat-y:

you can do horizontal linear gradients with stops (although chrome is currently broken in this respect):

body {
background:linear-gradient(to right,yellow,rgba(255,224,51,1) 20%,blue 40%,red 60%,orange 80%,green);
}

jmichae3
12-08-2012, 10:20 AM
there are more prefixeds and types of linear gradient than what is listed here. just google linear gradient css.

wheelstb
12-10-2012, 01:35 AM
Thanks for the info. I will be sure to take a look.

wheelstb
12-12-2012, 01:23 AM
I was able to accomplish the background I was looking for using Photoshop and putting layers on top of the gradient. Thank you to everyone who gave me advice and pointed me in the right direction.