CODEWITHSUNDEEP
htmlcss
Flignats
Flignats

Reputation: 1274

Creating a continuous CSS background

Using CSS, I've created a solid and striped background image, example:
jsfiddle example

HTML

<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

CSS 

.box {
  width: 50px;
  height: 50px;
  background: #FFF;
  background: linear-gradient(#9CE2C0, #9CE2C0) no-repeat border-box, repeating-linear-gradient(135deg, #9CE2C0, #9CE2C0 5px, #D5F7E8 5px, #D5F7E8 8px);
  background-size: 100% 5px, 100% 100%;
  background-position: 0 0, 0 0;
  display: inline-block;
}

Using only CSS, how can these background be styled so they are seamless across elements?

I'd like to be able to add in more elements, of the same dimensions, and have them seamless as well. Otherwise, I could just target each element individually and manually place the background, but I'd prefer not to do that.

Upvotes: 0

Views: 2044

Answers (3)

Twintails
Twintails

Reputation: 44

tryout this update to your second gradient.

repeating-linear-gradient(135deg, #9CE2C0, #9CE2C0 5px, #D5F7E8 5px, #D5F7E8 11.8px);

or toy with the width of the .box

Upvotes: 2

King Size
King Size

Reputation: 397

There can be many ways to achieve this. One is to keep the current html structure and just play with the rotation degree for he background. Another way is to modify the html a bit and wrap all your divs inside a parent div. Give background to the parent div. Here is an updated fiddle

<div class="box-parent"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>

css:

.box-parent {
width: auto;
height: 50px;

background: #FFF;
background: 
    linear-gradient(#9CE2C0, #9CE2C0) no-repeat border-box, 
    repeating-linear-gradient(135deg, #9CE2C0, #9CE2C0 5px, #D5F7E8 5px, #D5F7E8 8px);
background-size: 100% 5px, 100% 100%;
background-position: 0 0, 0 0;

}
.box{width:50px; display: inline-block;}

Upvotes: 0

Andrew G
Andrew G

Reputation: 2615

Try 180 degrees!

Or... Just use one div that holds all four divs and set the background on that.

If you wanted all 4 divs to be different colour stripes (or have similar visual fx) but still line up, that's a different question!

Upvotes: 1

Related Questions