Multiple background colors with css only

Question

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?

Describe what it should look like better. My understanding is that the last color defined would just overwrite the others so... what's the point. — Dustin Poissant
– Dustin Poissant, Commented Feb 22, 2016 at 14:04
possibile duplicate of stackoverflow.com/questions/32607835/… ? — Fabrizio Calderan
– Fabrizio Calderan, Commented Feb 22, 2016 at 14:17
Hey have you tried this below? stackoverflow.com/questions/19081355/… — Mr Nsubuga
– Mr Nsubuga, Commented Feb 22, 2016 at 14:24

Quentin · Accepted Answer · 2016-02-22 14:12:36Z

12

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)

answered Feb 22, 2016 at 14:12

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nenad Vracar · Accepted Answer · 2016-02-22 14:12:23Z

3

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>

answered Feb 22, 2016 at 14:12

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

Paulie_D · Accepted Answer · 2016-02-22 14:12:38Z

2

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>

answered Feb 22, 2016 at 14:12

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Comments

NachoDawg · Accepted Answer · 2016-02-22 14:13:02Z

2

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

answered Feb 22, 2016 at 14:13

NachoDawg

1,55412 silver badges22 bronze badges

Comments

Michael · Accepted Answer · 2016-02-22 14:29:41Z

2

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>

edited Feb 22, 2016 at 14:29

answered Feb 22, 2016 at 14:07

Michael

1,0891 gold badge11 silver badges28 bronze badges

4 Comments

Prashanth Over a year ago

Most of the modern browers do not need the prefixes. Only the standard syntax works fine. Get rid of prefixes

Michael Over a year ago

Yes but old browsers is still used too

Prashanth Over a year ago

Yeah I agree. But the numbers are very less. -o- prefixed browers are of 0.25% of the total global user base as stated in the above mentioned article. So are the others. I would prefer this as I want my code to look neat :)

Michael Over a year ago

In Russia Opera was very popular, I think 30% of market few years ago. But after they clone chrome I think popularity is not so big...

Sprazer · Accepted Answer · 2016-02-22 14:25:19Z

1

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);

answered Feb 22, 2016 at 14:25

Sprazer

5202 silver badges11 bronze badges

2 Comments

alexey Over a year ago

As you can see in the question. I whant to use "css only" and only 1 element.

Sprazer Over a year ago

@alexey yeah I know, that's why I answered this way. The only way to solve your problem is by splitting up your text in multiple elements. Using the "linear-gradient" solution will be more complex if you want many colors and then you will style as if all rows were blocks. (you will have background colors where there is no text)

Collectives™ on Stack Overflow

Multiple background colors with css only

6 Answers 6

Comments

Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related