Can I have multiple background images using CSS?
CSS3 allows this sort of thing and it looks like this:
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:
<body>
<div id="bgTopDiv">
content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}
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!
positioning multiple background images
Try this
.img_home{ background-repeat: no-repeat; height: 1000px; background: url(http://www.spidycode.com/testing/revibe/images/Circle1.png) 25px top no-repeat,url(http://www.spidycode.com/testing/revibe/images/Circle2.png) no-repeat;}
<div class="img_home"></div>
Visibility of multiple background images
You cant do visible:hidden
that on multiple backgrounds you can hide the whole div. One hack I did was to use the background size to get to it
/*CSS */
.app1 {
background-image: url(../img/photo1.png),
url(../img/photo2.png);
}
//JS
$('.app1').css({'background-size':'0 0, 27em'});//to hide photo1.png
$('.app1').css({'background-size':'17em, 0 0'});//to hide photo2.png
This is the way to do it till we have some more background specs coming up ;)
Javascript add multiple background images using HTML DOM or Jquery
You can use the background-image
CSS property, which can be given multiple images. The first background specified will be on the top and the last one will be on the bottom.
document.querySelector("button").addEventListener("click", function(e){
document.querySelector("table").style.backgroundImage += ",url(https://www.w3schools.com/css/paper.gif)";
}, {once: true});
<table style="height: 100px; width: 100px; border: 1px solid black; background-image: url(https://www.w3schools.com/css/img_flwr.gif);">
</table>
<button>
Add Image
</button>
Multiple background images positioning
Your problem is that the repeat-y
is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.
One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px
at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):
CSS
div {
position: relative;
z-index: 2;
background: url(top.png) top left no-repeat,
url(bottom.png) bottom left no-repeat;
}
div:before {
content: '';
position: absolute;
z-index: -1; /* push it to the background */
top: 12px; /* position it off the top background */
right: 0;
bottom: 12px; /* position it off the bottom background */
left: 0;
background: url(middle.png) top left repeat-y;
}
If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after
pseudo element positioned to the bottom of the container.
Related Topics
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used
Laravel - Barryvdh Pdf - How Include External CSS File into HTML View
How to Center ≪Ul≫ ≪Li≫ into a Div
Font Scaling Based on Width of Container
Change Navbar Color in Twitter Bootstrap
How to Prevent Less from Trying to Compile CSS Calc() Properties
Equal Height Rows in CSS Grid Layout
How to Get Ff 33.X Flexbox Behavior in Ff 34.X
Which CSS Properties Are Inherited
How to Change Whole Page Background-Color in Angular
Bootstrap Take Full Width for Select Drop Down
Align an Image and Some Text on the Same Line Without Using Div Width
Format Text in a ≪Textarea≫
Chrome/Safari Not Filling 100% Height of Flex Parent
How to Really Isolate Stylesheets in the Google Chrome Extension