CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ramaraju.d
Ramaraju.d

Reputation: 1353

Can we assign all RGB color combination color as html body background and set the color of a particular section dynamically

My question may be strange but just want to know the probability of achieving this,

I have an image with all combination of (0,0,0) to (255,255,255)

enter image description here

It is easy to use this as background for html body.

But Instead of using an image, Is it possible to fill a body background-color using CSS color property just similar to image?

Hope you understand my question?

UPDATE:

Can we get the color property of a particular section of the page. I mean, I want to get the color of the area that is 3px from top position. So that i cab assign it to another div dynamically.

Suppose i have a fixed header, and i keep on scrolling the content of the page. Then how can i change the color of the header dynamically that is equal to the top 2px section that is being scrolled.

Upvotes: 1

Views: 1162

Answers (2)

Andrew
Andrew

Reputation: 20081

Yes use CSS gradients. You can generate them automatically with online tools like http://www.colorzilla.com/gradient-editor/

I created one for you that is shnazzy: http://jsfiddle.net/3nC9V/

The CSS

#cool {
    height:1000px;

    background: #ffb76b; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb76b 0%, #ff0509 10%, #ff6b6b 22%, #fff76b 36%, #2aff00 52%, #6bfff5 65%, #6b6dff 80%, #ff05ea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(10%,#ff0509), color-stop(22%,#ff6b6b), color-stop(36%,#fff76b), color-stop(52%,#2aff00), color-stop(65%,#6bfff5), color-stop(80%,#6b6dff), color-stop(100%,#ff05ea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb76b 0%,#ff0509 10%,#ff6b6b 22%,#fff76b 36%,#2aff00 52%,#6bfff5 65%,#6b6dff 80%,#ff05ea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb76b 0%,#ff0509 10%,#ff6b6b 22%,#fff76b 36%,#2aff00 52%,#6bfff5 65%,#6b6dff 80%,#ff05ea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb76b 0%,#ff0509 10%,#ff6b6b 22%,#fff76b 36%,#2aff00 52%,#6bfff5 65%,#6b6dff 80%,#ff05ea 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb76b 0%,#ff0509 10%,#ff6b6b 22%,#fff76b 36%,#2aff00 52%,#6bfff5 65%,#6b6dff 80%,#ff05ea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff05ea',GradientType=0 ); /* IE6-9 */
}

HTML

<div id="cool">
</div>

Upvotes: 2

Tim B
Tim B

Reputation: 41188

The general term for this is a gradient.

http://www.w3schools.com/css/css3_gradients.asp

You may not be able to get every colour as they only allow linear gradients (although by chaining divs together you possibly could).

Upvotes: 2

Related Questions