CODEWITHSUNDEEP
htmlcss
Ormocanon
Ormocanon

Reputation: 41

How can I set 2 background colors in a div

I need some help with setting 50% of the div is color blue and the other 50% of the div is color red, horizontally. How can I do that? Thanks!

Upvotes: 0

Views: 60

Answers (4)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Might be over kill, but here it is http://jsfiddle.net/e9ypqy5t/6/

.repeat {
  width: 100px;
  height: 100px;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50px,
      red 50px,
      red 100px 
    );
}

And here is the example using percentages http://jsfiddle.net/e9ypqy5t/8/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50%,
      red 50%,
      red 100%
    );
}

This method will allow you to also add more lines of color like this: http://jsfiddle.net/e9ypqy5t/10/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 10%,
      red 10%,
      red 20%
    );
}

Upvotes: 1

Michael Barreiro
Michael Barreiro

Reputation: 328

You might be wanting a "gradient". Heres the code.

.box {
  height: 200px;
  width: 200px;
  /* fallback */
  background-color: #1a82f7;

  /* Safari, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox*/
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera*/
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
<div class='box'></div>

Upvotes: 0

Platte Gruber
Platte Gruber

Reputation: 3183

Pure css solution using :after pseudo selecter: http://jsfiddle.net/eLwdbgat/

div {
    width: 80%;
    height: 300px;
    background-color: red;
}

div::after {
    content:'';
    position: fixed;
    height: 300px;
    width: 40%;
    left: 40%;
    background: lightgrey;
}

Upvotes: 0

billy23lones
billy23lones

Reputation: 25

I'm guessing this may be of use to you in this case:

#divname {
 background:linear-gradient(#ff0000,#0000ff);
}

Upvotes: 0

Related Questions