Multi-Colored Background (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

moondog -> Multi-Colored Background (6/11/2009 23:47:16)

In the past, I've done web pages with just one solid color as the background. However, I've seen somewhere in my browsing a website that had a multi-colored background.

Exactly what I mean by that is that from about 0 to 120 pixels down from the top was one color and then from 121 to 400 was another color and then the rest of the page was a third color.

Can this be done by "code" either html or css or do I need to create a background picture just that way and set that as my background.

If you need a picture to understand better, please let me know and I'll put it up as soon as I can.

Thanks friends!

dog



Tailslide -> RE: Multi-Colored Background (6/12/2009 1:58:04)

Create a thin vertical strip of the desired design in your graphics package with the bands of colour ending at the colour that then fills the remainder of the page (e.g. might be 400 pixels high and 20pixels wide).

Now add that in as a background image in the stylesheet thus: 

body {background:#fff url(../images/background.gif) left top repeat-x;}


#fff = the background colour, for this example it's white so replace with whatever's relevant
url( ) = the location of the image from the location of the stylesheet
left top = the initial position of the image - top left of the page
repeat-x = will repeat the image horizontally across the page



moondog -> RE: Multi-Colored Background (6/12/2009 14:39:46)

I had to edit this now that I think I've got it. I create a small strip with the maroon on top and gray next. The part I'm having trouble with is your use of the word style sheet. I usually compose in FrontPage ... will I still be able to do this? If so, how?

dog






moondog -> RE: Multi-Colored Background (6/13/2009 0:01:28)

Tried doing this in FrontPage

This is the 'image' for the background

[image]http://i68.photobucket.com/albums/i25/moondog830/backcolor.jpg[/image]

and this is the code you said to enter (at the bottom part of the style sheet)

[image]http://i68.photobucket.com/albums/i25/moondog830/coding.jpg[/image]

but nothing happens ..... and I know it has to be something I'VE done wrong. So what's up?

dog




Tailslide -> RE: Multi-Colored Background (6/13/2009 1:47:46)

The path is wrong.

Personally I wouldn't have the rule in the document head - too difficult to maintain across a site.

I'd have it in a stylesheet and link to that in the document head instead.

In the example I gave you it's the standard setup i.e. the rule is in a stylehseet in a folder for stylesheets and it's looking for the image in the images folder which is up one from the stylesheet folder.

So basically depending on where you put the rule you need the path to the image to match. If you leave it in the document head and if the image is in an images folder then the path would be: images/backcolor.jpg - for example.



moondog -> RE: Multi-Colored Background (6/13/2009 9:22:10)

Thanks Tailslide, Now it works! Not sure why it didn't occur to me to work on the path more.

I don't know how to use stylesheets as you're talking about. You can see what I've used to create a certain
style to my pages. I got that from copying from another website to see how to make it work for me. I wasn't aware you could just create a stylesheet for an entire website and not have to put it on each and every page.

Is there a tutorial somewhere for that?

YOUR site by the way is excellent .... very nice, clean and so are the ones you've done for clients.




Tailslide -> RE: Multi-Colored Background (6/13/2009 10:10:23)

Thanks!

Yes the big advantage of using CSS over old-style formatting is that you have a single stylesheet with all the rules in (you can add IDs and classes to bits of the page to add specificity in). So if you want to change the colour of links throughout your site - you only have to change it in one place!

Have a look here: http://www.cssbasics.com/



Mango Himself -> RE: Multi-Colored Background (6/16/2009 1:45:38)


quote:

Is there a tutorial somewhere for that?

YOUR site by the way is excellent


My words exactly about three years ago. I listened to tailslide and now I design beautiful sites.



Tailslide -> RE: Multi-Colored Background (6/16/2009 3:51:39)

You old charmer Mango!! All I do is nag people!



MCD -> RE: Multi-Colored Background (6/16/2009 7:47:39)


quote:

ORIGINAL: Tailslide

You old charmer Mango!! All I do is nag people!

If you stop nagging I'll be broke, hungry and homeless.



moondog -> RE: Multi-Colored Background (6/16/2009 8:10:10)

Tailslide,
I'll take your nagging anytime :o) .... oh, and I meant to ask. Your avatar .... is that SERENITY?

dog



Tailslide -> RE: Multi-Colored Background (6/16/2009 8:33:14)

Yep!



moondog -> RE: Multi-Colored Background (6/16/2009 8:38:48)

Finally some validation that I AM a Sci-Fi geek and NOT mentally unstable :o)




Tailslide -> RE: Multi-Colored Background (6/16/2009 9:17:39)

...probably both.... [:D]



moondog -> RE: Multi-Colored Background (6/16/2009 9:58:27)

well, that is certainly what my wife thinks! [:-]



Mango Himself -> RE: Multi-Colored Background (6/22/2009 16:35:46)


quote:

ORIGINAL: Tailslide

You old charmer Mango!! All I do is nag people!



Your nagging is as gracious as you are. You are proof that beauty and brains really do come together!



moondog -> RE: Multi-Colored Background (7/22/2009 21:33:47)

Thanks to Tailslide, this problem is now solved and can be viewed in it's finished product at

http://www.acwgc.org/CSA_CoA/

dog



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375