Skip navigation
Allen Macfalda
Currently Being Moderated

on a page how do you get three color strips as a background yellow grreen and blue

Apr 18, 2013 11:32 PM

body {
width: 100%;
min-width: 1100px; /*containment*/
margin:0 auto; /**centers page**/
padding:0;
background: #FF3;
color: #000;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
}

this gets me a yellow background but how do i modify it to add a green and blue stripe accross the background

 
Replies
  • Currently Being Moderated
    Apr 19, 2013 12:22 AM   in reply to Allen Macfalda

    Use a repeating background image attached to the 'body' tag.

     

    Create your striped image as a gif then add the below to your 'body' css styles:

     

    background-image: url(yourImageName.gif);

    background-repeat: repeat-x;

     

     

    Replace 'yourImageName' above with the name of YOUR image. Make sure the image is in the site root folder. If its in a folder within the site root folder, for instance called 'images', then add the folder name as below:

     

     

    background-image: url(images/yourImageName.gif);

    background-repeat: repeat-x;

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2013 4:14 AM   in reply to Allen Macfalda

    Allen Macfalda wrote:

     

    is there a way  of doing this three color with css Allen

     

    I don't know. Not with the current css specs I'm using but I haven't really explored CSS3 specs at the moment. I know it can do some advanced stuff but not sure about if it can create a striped background. Someone like Nancy will know when she comes on later this afternoon. Maybe she will latch onto the thread....maybe not.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 19, 2013 4:32 AM   in reply to Allen Macfalda

    html, body {

            height: 100%;

    }

     

    body {

            background: -moz-linear-gradient(top, #f2e530 0%, #f2e530 32%, #1ebf41 33%, #1ebf41 66%, #207dc9 67%, #207dc9 100%);

            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2e530), color-stop(32%,#f2e530), color-stop(33%,#1ebf41), color-stop(66%,#1ebf41), color-stop(67%,#207dc9), color-stop(100%,#207dc9));

            background: -webkit-linear-gradient(top, #f2e530 0%,#f2e530 32%,#1ebf41 33%,#1ebf41 66%,#207dc9 67%,#207dc9 100%);

            background: -o-linear-gradient(top, #f2e530 0%,#f2e530 32%,#1ebf41 33%,#1ebf41 66%,#207dc9 67%,#207dc9 100%);

            background: -ms-linear-gradient(top, #f2e530 0%,#f2e530 32%,#1ebf41 33%,#1ebf41 66%,#207dc9 67%,#207dc9 100%);

            background: linear-gradient(to bottom, #f2e530 0%,#f2e530 32%,#1ebf41 33%,#1ebf41 66%,#207dc9 67%,#207dc9 100%);

    }

    NB. Not all browsers  support gradient

     

    --

    Kenneth Kawamoto

    http://www.materiaprima.co.uk/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points