Background Colors for Web Pages
Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Background Colors for Web Pages

  1. #1
    Senior Member
    Join Date
    Feb 2002
    Posts
    856

    Question Background Colors for Web Pages

    I'm just learning HTML and planning my first web site. I'd like some advice from more experienced people. Question: What background colors do you like to use? I realize someone might say, "What does it matter?" But I want something that will be easy on my viewers eyes. Some of my pages might have a good bit of text too. What background/text color combinations have you found to be pleasing to the eye and less likely to cause eye straing and/or annoyance on the part of the page viewer? Thanks.
    For the wages of sin is death, but the free gift of God is eternal life in Christ Jesus our Lord.
    (Romans 6:23, WEB)

  2. #2
    Senior Member
    Join Date
    Oct 2001
    Posts
    689

    Post

    You can not beat white as the best color for a web background. All other colors provide a contrast and are highly visible. Just my personal opinion.
    Wine maketh merry: but money answereth all things.
    --Ecclesiastes 10:19

  3. #3
    AO Antique pwaring's Avatar
    Join Date
    Aug 2001
    Posts
    1,408
    Black text on a white background tends to be easiest to read, hence it is the default for most browsers. Choose completely opposite shades or else you'll end up with an unreadable mess, and *never* use complimentary colours (yellow/purple, red/green, blue/orange) together as they will make an absolute mess of things and will look blurred to anyone who doesn't have the latest LCD monitor.

    Make sure you use a bright text on a dark background (or vice versa), don't use complimentary colours and don't use different shades of the same colour and you should be okay. If you're ever stuck, just fall back on black on white.
    Paul Waring - Web site design and development.

  4. #4
    Senior Member
    Join Date
    Feb 2002
    Posts
    856
    Okay guys,
    I've decided to go with a white back ground and black text, and to use red a main color theme. Thanks for you imput.
    For the wages of sin is death, but the free gift of God is eternal life in Christ Jesus our Lord.
    (Romans 6:23, WEB)

  5. #5
    Flash M0nkey
    Join Date
    Sep 2001
    Posts
    3,447
    Your question reminded me of a wee bit of DHTML i saw a while ago so I dug out the code for you......it creates 3 sliding bars on ur web-page that control the RGB vlaues of the background colour - a bit of a gimic with no real use but fun to play about with

    just copy the code below into a new txt document and save as html

    <html>
    <head>
    <title>Slider</title>
    <meta name="Author" content="Ronald H. Jankowsky">
    <meta name="Description" content="Slider-Script">
    <style>.drag {position: relative; cursor: hand}</style>
    <SCRIPT LANGUAGE="JavaScript1.2">
    // Slider script by Ronald H. Jankowsky (http://rj-edv-beratung.de), parts of code (draglayer, movelayer) by DynamicDrive.com
    // This script is free for use, please leave this notice intact
    var sPosition;
    var showPerc=100;
    document.onmousedown=dragLayer
    document.onmouseup=new Function("dragMe=false")

    var Color= new Array();
    Color[0] = "00";
    Color[1] = "11";
    Color[2] = "22";
    Color[3] = "33";
    Color[4] = "44";
    Color[5] = "55";
    Color[6] = "66";
    Color[7] = "77";
    Color[8] = "88";
    Color[9] = "99";
    Color[10] = "AA";
    Color[11] = "BB";
    Color[12] = "CC";
    Color[13] = "DD";
    Color[14] = "EE";
    Color[15] = "FF";

    // Demofunction to change bg-color by moving slider
    var rVal,gVal,bVal, cCol
    function chgBg() {
    cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
    ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
    // If more sliders are used, each of them has to be handled separately
    if (kObj.id =="knobImg") document.bgColor="#"+Color[ind]+gVal+bVal;
    if (kObj.id =="knobImg1") document.bgColor="#"+rVal+Color[ind]+bVal;
    if (kObj.id =="knobImg2") document.bgColor="#"+rVal+gVal+Color[ind];
    }

    // Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated
    var dragMe=false, kObj, yPos,direction
    function moveLayer() {
    if (event.button==1 && dragMe) {
    oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos;
    // Limit movement of knob to stay inside layer
    if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
    if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
    if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
    // Set working variable 'showPerc' depending on 100 or 250 scaling
    sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5;
    // The following line should be replaced by the function-call with the actual task to perform
    chgBg();
    return false; }
    }
    function dragLayer() {
    if (!document.all) return;
    if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; }
    }
    </script>
    </head>

    <body bgcolor="#FFFFFF">
    <!-- Each of the 'outerLyr#'-divs creates a slider element.
    There can be as much sliders as needed. Just make sure,
    they have different names, especially the img (knob is referred and acted on by name)-->



    This is an impressive demonstration of using DHTML to create adjust bars. Here in the demo, the bars function as color adjusters, though, through modification, can be set to do virtually anything.
    <div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 155px; top: 111px; background-color: #000000">
    [img]knob.jpg[/img]
    <div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
    <div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
    </div>
    </div>
    <div id="outerLyr1" style="position:absolute; width:23px; height:120px; z-index:1; left: 185px; top: 111px; background-color: #000000">
    [img]knob.jpg[/img]
    <div id="innerLyr1" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
    <div id="barLyr1" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
    </div>
    </div>
    <div id="outerLyr2" style="position:absolute; width:23px; height:120px; z-index:1; left: 215px; top: 111px; background-color: #000000">
    [img]knob.jpg[/img]
    <div id="innerLyr2" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
    <div id="barLyr2" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
    </div>

    </div>
    <input type="radio" name="perCent" value="false">Prozent
    <input type="radio" name="perCent" value="true" checked>255
    </body>
    </html>
    v_Ln

    -Have just noticed that I've become a senior member....never realised I had posted that much funky

  6. #6
    Junior Member
    Join Date
    Apr 2002
    Posts
    11
    In my humble opinion it depends on what kind of page you like to make...

    I for one prefer darker backgrounds (eg BLACK) because the contrast you create for images in this way creates a certain mood that I am looking for in my pages..
    If I use black as background color, then I rarely use white for the text.. then the contrast is too high.. maybe something soft blue (close to white) or something makes it better to read.

    I would advise you:
    a. Look around on pages.. study the pages you like and think "Why do I like these pages".
    b. Try for yourself.. don't be afraid to experiment, play around.. there so many options to play around with that just by playing you discover things one never thought of before..
    c. Take a break from time to time, because sometimes your own page blinds you. Taking a break and then looking back at the page makes you a hell of a lot more critical.

    d. Have phun in what you are doing! <-- most important

    cheers

  7. #7
    Flash M0nkey
    Join Date
    Sep 2001
    Posts
    3,447
    Just whatever you do avoid using #ECFE12 <- most hatefull color for txt EVER!!
    ewwww bright yellow, could there be anything more straining on the eyes?

    v_Ln

  8. #8
    Senior Member
    Join Date
    Oct 2001
    Posts
    689

    Post

    Originally posted here by valhallen
    Your question reminded me of a wee bit of DHTML i saw a while ago so I dug out the code for you......it creates 3 sliding bars on ur web-page that control the RGB vlaues of the background colour - a bit of a gimic with no real use but fun to play about with

    just copy the code below into a new txt document and save as html



    v_Ln

    -Have just noticed that I've become a senior member....never realised I had posted that much funky
    Hi valhallen. Im not sure if this code only works in IE, but I put it up on my site and it didnt work with Mozilla. If you want to see it check out http://skriptkittysecurity.cjb.net/slider.html
    Wine maketh merry: but money answereth all things.
    --Ecclesiastes 10:19

  9. #9
    Flash M0nkey
    Join Date
    Sep 2001
    Posts
    3,447
    yeah soz i 4got to mention that - the site I took it from (link in code)seems to only do code for IE and netscape - havn't checked to see if it works in netscape atm (am running flash 5, cd player, IE, psp, dreamworks, and mirc - my wee 166mhz cpu couldn't handle netscape 6 as well )
    but that page worked fine in IE 5
    soz again
    v_Ln

  10. #10
    Senior Member
    Join Date
    Mar 2002
    Posts
    238
    I have a few questions. First of all, I am making my first site in HTML. Here is the code so far, tell me what you think:
    <html>
    <title>Nitro Evolution Home</title>
    <body bgcolor="#CCCCCC">
    [img]images/NITE2.gif[/img]<font size=4><font face="Eurostar Black Extended">
    <font color="#000000">N i t r o<font color="#CCCCCC">d</font color>
    E v o lu t i o n<font color="#CCCCCC">d</font color>H a c k e r s</font>
    </font color></font size>
    <hr>
    <font face="Verdana"><font size=1><font color="navy">
    <td><marquee>Welcome to Nitro Evolution. We are a group of computer enthusiasts
    who have come together to show the world the legal side of hacking. We do not condone
    illegal activity, and if you do it's out the door with you. This site was coded and
    programmed by Silentstalker. Thank you and please come back soon!</font>
    </font size></font color></td></marquee><hr>



    <h4>Navigation</h4>
    <font color="#800000">BBS</font></font><font color="#800000">

    </font><font color="navy">
    <font color="#800000">IRC</font><font color="#800000">

    </font>
    <font color="#800000">Staff</font><font color="#800000">

    </font>
    <font color="#800000">Join The Staff</font><font color="#800000">

    </font>
    <font color="#800000">Links</font><font color="#800000">

    </font>
    <font color="#800000">Text Files</font><font color="#800000">

    </font>
    <font color="#800000">Programs</font><font color="#800000">

    </font>
    <font color="#800000">Affiliates</font><font color="#800000">

    </font>
    <font color="#800000">Live Hacker Chat</font><font color="#800000">

    </font>
    <font color="#800000">Comments</font><font color="#800000">

    <a href="coding.htm"><font color="#800000">Coding And Programming</font></font color>

    <font color="#80000">Web Design and Development</font color>
    <script>
    scrolly ("Welcome to N.I.T.E. (Nitro Evolution). Enjoy!")
    function scrolly(tx)
    {
    if (document.scrollText == null) {
    document.scrollText = "";
    for (i = 0; i < 200; i++) {
    document.scrollText = document.scrollText + " ";
    }
    document.scrollText = document.scrollText + tx;
    document.scrollNum = 0;
    document.scrollMsg = "";
    document.scrollGo ="1";
    }
    if (document.scrollText != null && document.scrollGo == "1") {
    for (k = document.scrollNum; k < document.scrollText.length; k++) {
    document.scrollMsg = document.scrollMsg + document.scrollText.charAt(k);
    }
    window.status = document.scrollMsg;
    document.scrollNum++;
    document.scrollMsg = "";
    }
    if (document.scrollNum == document.scrollText.length) {
    document.scrollText = null;
    }
    ab1 = window.setTimeout("scrolly('"+ tx +"');", 50);
    }
    </script>

    That script was a little something I added

    Anyway, if you guys code provide me with the following codes, it be great

    Text Box Tag(s)
    And How To Make Something Follow your cursor on a screen

    Thanks in advance
    -{[ Joe ]}- (Joe@nitesecurity.com)
    http://www.nitesecurity.com

    [shadow]I\'m Just A Soldier In This War Against Ignorance.[/shadow]

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

 Security News

     Patches

       Security Trends

         How-To

           Buying Guides