I know how to specify multiple background images using CSS3 and modify how they are displayed using different options.
Currently I have a <div>, which needs to have a different color for about 30% of the width on the left side:
div#content {
background: url("./gray.png") repeat-y, white;
background-size: 30%;
}
Instead of loading the image which is totally gray, how can I do this specifying the color, and without additional <div>s?
This question is related to
css
In this LIVE DEMO i've achieved this by using the :before css selector which seems to work quite nicely.
.myDiv {_x000D_
position: relative; /*Parent MUST be relative*/_x000D_
z-index: 9;_x000D_
background: green;_x000D_
_x000D_
/*Set width/height of the div in 'parent'*/ _x000D_
width:100px;_x000D_
height:100px;_x000D_
}_x000D_
_x000D_
_x000D_
.myDiv:before {_x000D_
content: "";_x000D_
position: absolute;/*set 'child' to be absolute*/_x000D_
z-index: -1; /*Make this lower so text appears in front*/_x000D_
_x000D_
_x000D_
/*You can choose to align it left, right, top or bottom here*/_x000D_
top: 0; _x000D_
right:0;_x000D_
bottom: 60%;_x000D_
left: 0;_x000D_
_x000D_
_x000D_
background: red;_x000D_
}<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>I thought i would add this as I feel it could work quite well for a percentage bar/visual level of something.
It also means you're not creating multiple divs if you don't have to, and keeps this page up-to-date
Yes its possible! and you can use as many colors and images as you desire, here is the right way:
body{_x000D_
/* Its, very important to set the background repeat to: no-repeat */_x000D_
background-repeat:no-repeat; _x000D_
_x000D_
background-image: _x000D_
/* 1) An image */ url(http://lorempixel.com/640/100/nature/John3-16/), _x000D_
/* 2) Gradient */ linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)), _x000D_
/* 3) Color(using gradient) */ linear-gradient(to right, RGB(110, 175, 233), RGB(110, 175, 233));_x000D_
_x000D_
background-position:_x000D_
/* 1) Image position */ 0 0, _x000D_
/* 2) Gradient position */ 0 100px,_x000D_
/* 3) Color position */ 0 130px;_x000D_
_x000D_
background-size: _x000D_
/* 1) Image size */ 640px 100px,_x000D_
/* 2) Gradient size */ 100% 30px, _x000D_
/* 3) Color size */ 100% 30px;_x000D_
}You can use as many colors and images as you desire.
Please note that the priority with which the background images are rendered is FILO, the first specified image is on the top layer, the last specified image is on the bottom layer (see the snippet).
#composition {_x000D_
width: 400px;_x000D_
height: 200px;_x000D_
background-image:_x000D_
linear-gradient(to right, #FF0000, #FF0000), /* gradient 1 as solid color */_x000D_
linear-gradient(to right, #00FF00, #00FF00), /* gradient 2 as solid color */_x000D_
linear-gradient(to right, #0000FF, #0000FF), /* gradient 3 as solid color */_x000D_
url('http://lorempixel.com/400/200/'); /* image */_x000D_
background-repeat: no-repeat; /* same as no-repeat, no-repeat, no-repeat */_x000D_
background-position:_x000D_
0 0, /* gradient 1 */_x000D_
20px 0, /* gradient 2 */_x000D_
40px 0, /* gradient 3 */_x000D_
0 0; /* image position */_x000D_
background-size:_x000D_
30px 30px,_x000D_
30px 30px,_x000D_
30px 30px,_x000D_
100% 100%;_x000D_
}<div id="composition">_x000D_
</div>You can only use one color but as many images as you want, here is the format:
background: [ <bg-layer> , ]* <final-bg-layer>
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <background-color>
or
background: url(image1.png) center bottom no-repeat, url(image2.png) left top no-repeat;
If you need more colors, make an image of a solid color and use it. I know it’s not what you want to hear, but I hope it helps.
The format is from http://www.css3.info/preview/multiple-backgrounds/
In case someone needs a CSS background with different color repeating horizontal stripes, here is how I managed to achieve this:
body {_x000D_
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;_x000D_
font-size: 13px;_x000D_
}_x000D_
_x000D_
.css-stripes {_x000D_
margin: 0 auto;_x000D_
width: 200px;_x000D_
padding: 100px;_x000D_
text-align: center;_x000D_
/* For browsers that do not support gradients */_x000D_
background-color: #F691FF;_x000D_
/* Safari 5.1 to 6.0 */_x000D_
background: -webkit-repeating-linear-gradient(#F691FF, #EC72A8);_x000D_
/* Opera 11.1 to 12.0 */_x000D_
background: -o-repeating-linear-gradient(#F691FF, #EC72A8);_x000D_
/* Firefox 3.6 to 15 */_x000D_
background: -moz-repeating-linear-gradient(#F691FF, #EC72A8);_x000D_
/* Standard syntax */_x000D_
background-image: repeating-linear-gradient(to top, #F691FF, #EC72A8);_x000D_
background-size: 1px 2px;_x000D_
}<div class="css-stripes">Hello World!</div>Source: Stackoverflow.com