CODEWITHSUNDEEP
htmlcss
alexey
alexey

Reputation: 801

Multiple background colors with css only

I want to have one element with multiple background colors? Analog of:

<div class="multiplebackground">
  <div style="background-color:red"></div>
  <div style="background-color:green"></div>
  <div style="background-color:blue"></div>
</div>

but if I have only 1 div with some text content:

<div class="multiplebackground">
  ...
</div>

.multiplebackground {
  ???
}

Or it is not possible?

Upvotes: 11

Views: 15886

Answers (6)

Michael
Michael

Reputation: 1089

May be linear gradient

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

body, html {
margin: 0;
  padding: 0;
}

   #grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow, green); /* Standard syntax */
}
<div id="grad"></div>

Upvotes: 2

Sprazer
Sprazer

Reputation: 520

With CSS you can (as of right now) only style the first row different.

p:first-line{ background-color: coral;}

if you want something like :nth-line() you have to make it in javascript.

Here is an example of that: http://codepen.io/jnowland/pen/AifjK/

var nthLine = function () {
    var content = $('h1').text();
    var words = content.split(" ");
    var cache = words[0]; //because we miss the first word as we need to detect the height.
    var lines = [];
    $("header").append('<h1 id="sample">' + words[0] + '</h1>');
    var size = $('#sample').height();
    var newSize = size;
    for (var i = 1; i < words.length; i++) {
        var sampleText = $('#sample').html();
        cache = cache + ' ' + words[i];
        marker = [i];
        $('#sample').html(sampleText + ' ' + words[i]);
        var newSize = $('#sample').height();
        if (size !== newSize) {
            cache = cache.substring(0, cache.length - (words[i].length + 1));
            lines.push(cache);
            cache = words[i];
            size = $('#sample').height();
        }
    }
    lines.push(cache);
    cache = ''
    for (var i = 0; i < lines.length; i++) {
        cache = cache + ' <span class="line-' + [i] + '">' + lines[i] + '</span>'
    }
    $('#sample').remove();
    cache = cache.substring(1);
    //prints the result.
    $('h1').html(cache);
};
nthLine();
$(window).resize(nthLine);

Upvotes: 1

NachoDawg
NachoDawg

Reputation: 1544

You can do this with the css3 gradient background property!

background: linear-gradient(to right, 
            red 33%, 
            green 33%, 
            green 66%, 
            blue 66%);

Notice that I define green twice, from 33% to 66%. That's because I have to define where it starts AND where it ends, so i get a sharp edge between every gradient

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 114991

Yes...using a linear gradient with color stops

.multiplebackground {
  height: 50px;
  background: linear-gradient(to right, red, red 33%, blue 33%, blue 66%, green 66%);
}
<div class="multiplebackground">

</div>

Upvotes: 2

Quentin
Quentin

Reputation: 943142

You can achieve this with gradients. You just need to blend from a colour to the same colour, and then blend to the next colour across zero pixels and so on.

.Neapolitan {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%);
}
<div class="Neapolitan">

</div>

(Prefixed alternatives and IE specific code is available for older browsers)

Upvotes: 12

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can do this with linear-gradient

body, html {
  margin: 0;
  padding: 0;
}

.multiplebackground {
  min-height: 100vh;
  background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%);
  background-size: 100%;
  background-repeat: no-repeat;
}
<div class="multiplebackground"></div>

Upvotes: 3

Related Questions