Multiple backgrounds with different background-size
Here you go:
html, body {
background-image: url(01.png), url(z.jpg);
background-repeat: repeat, no-repeat;
background-position: 0 0;
background-size: 3px 3px, cover;
}
http://jsfiddle.net/tpmD4/6/
CSS background size on multiple background images
From MDN:
The
<bg-size>
value may only be included immediately after<position>
, separated with the/
character, like this:center/80%
.
So you need to do something like this depending on which of those backgrounds need the 100% size:
background: url(/assets/images/site/bg-hero-l.svg) left top no-repeat,
url(/assets/images/site/bg-hero-r.svg) right top no-repeat,
url(/assets/images/site/hero-banner.jpg) top/100% no-repeat fixed;
CSS3 Backgrounds - multiple background-size properties
You need to reset the size for the first image, then specify it for the second. The spec says that the initial value of background-size
is auto
, which means:
-webkit-background-size: auto, cover;
-moz-background-size: auto, cover;
-o-background-size: auto, cover;
background-size: auto, cover;
Apply background-size to individual layer of a multiple background
I believe you can specify the size inline for each background url:
Here's the link: http://www.css3.info/preview/multiple-backgrounds/
so for example, use /cover below on your last url
body{
background:
url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
url(images/blur-bubble.png) repeat-x fixed -130% 0,
url(images/big-bubble.png) repeat-x fixed 40% 0,
url(images/green-gra-bg.jpg) no-repeat center/cover fixed;
background-color: #87d677;
}
for my own personal example I tested an example i found:
http://www.netmagazine.com/tutorials/get-grips-css3-multiple-background-images
body {
background:
url(imgs/cloud.png) top center/800px no-repeat,
url(imgs/clouds-scatter.png) -46% -330px/500px repeat-x,
url(imgs/hills.png) bottom center repeat-x,
url(imgs/peaks.png) bottom right repeat-x;
}
The 800px and 500px sizes I add appear to be affecting each layer independent from one another.
Need multiple background-size: cover;?
You can put <img>
tag one by another and give them all the same classname. And then give background-size: cover;
property to the class.
CSS: Set a background color which is 50% of the width of the window
Older Browser Support
If older browser support is a must, so you can't go with multiple backgrounds or gradients, you're probably going to want to do something like this on a spare div
element:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Example: http://jsfiddle.net/PLfLW/1704/
The solution uses an extra fixed div that fills half the screen. Since it's fixed, it will remain in position even when your users scroll. You may have to fiddle with some z-indexes later, to make sure your other elements are above the background div, but it shouldn't be too complex.
If you have issues, just make sure the rest of your content has a z-index higher than the background element and you should be good to go.
Modern Browsers
If newer browsers are your only concern, there are a couple other methods you can use:
Linear Gradient:
This is definitely the easiest solution. You can use a linear-gradient in the background property of the body for a variety of effects.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
This causes a hard cutoff at 50% for each color, so there isn't a "gradient" as the name implies. Try experimenting with the "50%" piece of the style to see the different effects you can achieve.
Example: http://jsfiddle.net/v14m59pq/2/
Multiple Backgrounds with background-size:
You can apply a background color to the html
element, and then apply a background-image to the body
element and use the background-size
property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
Example: http://jsfiddle.net/6vhshyxg/2/
EXTRA NOTE: Notice that both the html
and body
elements are set to height: 100%
in the latter examples. This is to make sure that even if your content is smaller than the page, the background will be at least the height of the user's viewport. Without the explicit height, the background effect will only go down as far as your page content. It's also just a good practice in general.
Repeatable background image with gradient overlay + background-size
You can define a different background size for each background image:
.texture {
width: 100%;
height: 500px;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');
background-size: auto, 100px 100px;
}
<div class="texture"></div>
Change background on element with multiple background images
Using multiple background images on a single element, unfortunately, there's no way using pure CSS to set the second background image in a separate rule without repeating all the previous background layers.
jQuery to the rescue.
jsFiddle demo in action
Inside your CSS set the second background to none
:
.banner_button{
background: linear-gradient(
rgba(0, 0, 0, 0.0),
rgba(0, 0, 0, 0.6)
), none 50% / cover; /* notice the `none` for the second layer */
width: 100%;
padding-bottom: 37.01%;
position: relative;
float: left;
}
while creating your elements, make sure to generate them passing the desired image URL from whatever data you use, >> inside a data-*
attribute of your generated element:
<div class="banner_button" data-bg="../images/whatever.jpg"></div>
Than using jQuery, replace that none
value with the value holded by the data-bg
attribute:
$(".banner_button").css("backgroundImage", function(i, v){
return v.replace("none", "url("+ $(this).data("bg") +")" );
});
That's it.
jQuery will rebuild the whole background layers for you!
Related Topics
How to Increase the Bullet Size in a Li
How to Solve the Table Row Background Image Problem, in Chrome, in Multi Celled Tables
How to Have Multiple Columns That Consume 100% Height Using Twitter Bootstrap
Preventing Relayout Due to Scrollbar
Overflow:Hidden Messing with Margins in Chrome and Safari
Responsive Design Using Md-Grid-List in Angular 2
Cross-Browser Issue: Min-Height and Collapsing Margins
Sass Store Selector in Variable
Svg Spritesheet Targeting with CSS
How Important Is W3C Xhtml/CSS Validation When Finalizing Work
Need CSS Text Color for A:Hover to Take Precedence Over A:Visited
Bootstrap Responsive Columns Height
Bootstrap 3 Arrow on Dropdown Menu
Get Angular Material Theme Color Scheme/Palette for Other Elements
How to Make Facebook Comments Widget a Fluid Width
Cssrules/Rules Are Null in Chrome