Total background versus page...

User 454418 Photo


Registered User
16 posts

I'm so inexperienced, I don't even know how to ask this question. I see nice webpages surrounded by lovely colors. I read that pages should be about 960 pixels wide, so that's what I made mine. I figured out how to choose the page background, but the page was left with an inch or so of gray surrounding it in the remainder of the screen. How can I change that gray to one of those lovely colors? Thanks.
User 563328 Photo


Registered User
85 posts

JoDee,

This is how I set up my CSS where the body background is an image instead of a color and the wrapper has a background-color for the 'page'.

body
{
font-family:Verdana, Helvetica, Arial, sans-serif;
line-height:18px;
font-size:100%;
color:#FFFFCC;
background-image:url('../images/natfl009.jpg');
}

#wrapper
{
float:left; width:100%; background-color:#48583E;
}
User 122279 Photo


Senior Advisor
14,624 posts

JoDee, if you want to see the background, and with a width of 960 pixels, I would write the styles for the wrapper like this:

#wrapper
{
margin: auto; width:960px; background-color:#48583E;
}

The 'margin: auto;' bit also centers the content.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 6573 Photo


Ambassador
2,649 posts

Can you post a link to your webpage, so we can see what you are saying. Because if you put image in the background then it would tile and you would not see gray.

So maybe you set the wrong background? For the background behind the webpage you go here to set:

From the menu, select "Settings"
Then select "Background fill properties"
Then you have 3 choices to choose a color, image or continue the page background.

Here is what the pop up screen will look like:
http://www.coffeecuphelp.com/krickman/helppics/vsd_backgroundfill.jpg

If this is what you did then, please put a link to your page showing the problem, so that we can see if there is another problem.

Also when you are working in the VSD program, you will not see the background you choose. It always shows gray. To view what the choice will look like you need to view it by clicking the preveiw button or testing in browser.

Kim


User 454418 Photo


Registered User
16 posts

Thanks to those who answered. Kim, that step by step was really helpful. I'm using the HTML editor. I had to start over, so the link below leads to what I've redone. The page is set at 960 pixels wide. The picture is 800 pixels wide. I could make the picture 960 if that would look better. I'm no longer seeing gray strips up the right and left side. I have no idea what it looks like to someone else. If it's correct, then my next step is to add menu buttons for home, contact, and so forth under the picture, and categories down the left side. And guess what? I don't know how to do that either. A tip would be most welcome. But again THANKS to everyone. You've been kind and patient. JoDee
stonycreekstore.com
User 562592 Photo


Registered User
2,038 posts

Is the picture the banner you currently have on the website. It floats to the right on my browser. I looked at your code. One of the issues I see is that you have it set to position:absolute. This does allow you more control over the image, but it does not let you resize the way you want.

It also makes a difference if the image you refer to is a banner, or a background image? I would suggest much different code for a banner than I would a background.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 184085 Photo


Ambassador
1,707 posts

if you add:

#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}

to your css

then wrap your page code in a <div> like this

<div id=wrapper>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>


your page will be auto centered regardless of the screen size your users are at.

Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.

Don't hesitate to drop on in and ask questions, we like questions :)
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 562592 Photo


Registered User
2,038 posts

david wilson wrote:
if you add:

#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}

to your css

then wrap your page code in a <div> like this

<div id=wrapper>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>


your page will be auto centered regardless of the screen size your users are at.

Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.

Don't hesitate to drop on in and ask questions, we like questions :)


Dave is correct. In addition to this make sure that if you do what Dave mentions then you do it to all of the elements on your page so that when the screen resizes your whole page moves with your banner.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.

My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).

My Personal Website: http://www.EricSEnglish.com

User 454418 Photo


Registered User
16 posts


It also makes a difference if the image you refer to is a banner, or a background image? I would suggest much different code for a banner than I would a background.


The image is not a banner, but it's not a background, either. It's just a picture I wanted at the top of my page. The background I refer to is just a teal color background on the rest of the page. The color is CCFFFF. I simply wanted the picture to be at the top center, and beneath it the row of links to home, contact and about.
User 454418 Photo


Registered User
16 posts

if you add:

#wrapper {background-color:#80FF80; width:800px; margin-left:auto; margin-right:auto;}

to your css

then wrap your page code in a <div> like this

<div id=wrapper>
<a href="http://www.stonycreekstore.com/"><img title="Stony Creek General Store" border="0" alt="Stony Creek" src="images/creekpic.jpg" width="800" height="249"/> </a>
</div>

your page will be auto centered regardless of the screen size your users are at.

Also your first anchor reference was htt, rather than http:// that is probably why it won't link back to the site, but no problem, quick fix.


Man, did I ever fall down the rabbit hole. I thought I could learn enough HTML to put up this website, but now I can see that I probably can't. David, and the rest of you, If I had any idea at all how to do what you suggested, I'd do it in a heartbeat. I'm not giving up yet. I'll read the manuals I've got and try to figure this out. And you all have my sincere gratitude. Thanks so much! JoDee

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.