I want to set different backgrounds of a div.
1) A color that will be on whole background.
2) An image on the right.
3) Another image on left.
Something like this
HTML
<div class="theTwoBG" />
CSS
.theTwoBG {
background: #24a342, url('path/to/image1.png') no-repeat right, url('path/to/image2.png') no-repeat left;
}
How can I achieve this?
See Using CSS multiple backgrounds you need to add background-position
.multi_bg_example {
background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background-repeat: no-repeat, no-repeat, repeat;
background-position: bottom right, left, right;
}
Important:
In your case you are using the shorthand writing, here is a working demo for that
.multi_bg_example {
width: 480px;
height: 300px;
background: url(http://lorempixel.com/200/200/) no-repeat left top,url(http://lorempixel.com/100/100/) no-repeat right bottom;
}
<div class=multi_bg_example></div>
This may be usefull...
<div class="my_cls">
</div>
<style type="text/css">
.my_cls {
width: 800px;
height: 500px;
background: url("3.jpg") center left, url("4.jpg") center right;
background-repeat: no-repeat;
background-color: #cccccc;
background-position: left, right;
background-size: 200px, 100px;
}
</style>
Related
There is a little space between my two divided blocks.
https://i.imgur.com/l411V0t.png here you can see my problem. I've can’t figure out why the blocks act like this.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 50%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>
In Firefox there is no gap to be found, in Edge and IE it shows so it seems to be a sizing issue. Increasing the background size to 51% closes the gap also in Edge.
I'll try to find how the different browsers calculate background sizes.
body, main {
width: 100%;
margin: 0;
background: black;
}
.container {
display: block;
height: 200px;
margin: auto;
}
.block {
width: 100%;
height: 100%;
background:
linear-gradient(-135deg, transparent 45px, wheat 0) top right,
linear-gradient(45deg, transparent 45px, wheat 0) bottom left;
background-size: 100% 51%;
background-repeat: no-repeat;
}
<main>
<div class="container">
<div class="block">
</div>
</div>
</main>
Interesting question, while when the container height is set to even number pixel, the line will be removed. When the container height is odd pixel, the line will be displayed.
The key factor should be background-size: 100% 50%; , so you could use scss round function to skip the rounding problem here.
I've tried following a guide on Youtube for help with this, and I can get it to work - sort of.
I'm trying to place two divs inside a section, where the top one is to house an image, and the bottom one be place for text etc.
The thing I'd like, is for the the top one to have a skewed razorblade dip in the middle, so the image sort of bleeds onto the bottom div.
I've managed to make the skew elements and place them where I'd like, but I when I turn them transparent, they seem to disappear.
Example: https://imgur.com/DsqNvZI
My CSS:
.section_1 {
height: 800px;
width: auto;
background: red;
}
.section_image {
height: 400px;
width: auto;
background: green;
position: relative;
background-image: url(lolsovs.jpg);
}
.section_image::after, .section_image::before {
position: absolute;
content: '';
width: 150px;
height: 150px;
background: green;
z-index: 100;
bottom: -1em;
}
.section_image::after {
left: 50%;
transform: skew(0, -20deg);
z-index: 100;
}
.section_image::before {
right: 50%;
transform: skew(0, 20deg);
}
.section_text {
background: purple;
height: 400px;
width: auto;
z-index: -100;
}
I'm still a novice when it comes to all of this stuff, so go gentle on me!
Thanks in advance!
but I when I turn them transparent, they seem to disappear.
Which is logical since you made them transparent. I advise you to consider another way to achieve this. You may simply consider some linear-gradient to color the bottom part to have this transparent part on the top:
.image {
height: 200px;
background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}
.bottom {
height:200px;
margin-top:-50px;
background:
linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - 21px) 0/40px 50px no-repeat,
linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + 20px) 0/40px 50px no-repeat,
linear-gradient(purple,purple)100% 0/calc(50% - 40px) 50px no-repeat,
linear-gradient(purple,purple)0 0/calc(50% - 40px) 50px no-repeat,
linear-gradient(purple,purple)0 50px/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom">
</div>
And for better handling you can use CSS variable to adjust dimension:
.image {
height: 200px;
background:url(https://lorempixel.com/400/200/) center/cover no-repeat;
}
.bottom {
height:200px;
margin-top:calc(-1 * var(--h,50px));
background:
linear-gradient(to bottom left,transparent 50%,purple 51%)calc(50% - (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
linear-gradient(to bottom right,transparent 50%,purple 51%)calc(50% + (var(--w,50px) /2)) 0/var(--w,50px) var(--h,50px) no-repeat,
linear-gradient(purple,purple)100% 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
linear-gradient(purple,purple)0 0/calc(50% - var(--w,50px)) var(--h,50px) no-repeat,
linear-gradient(purple,purple)0 var(--h,50px)/100% 100% no-repeat;
}
<div class="image">
</div>
<div class="bottom" style="--h:80px;--w:100px">
</div>
I have three background images and I would like them to be on the top of each other. Besides that, I would like to place them manually and not just align.
How can I do this?
My codepen
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
-
.first {
background: url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg") no-repeat;
background-size: 100% 100%;
height: 400px;
}
.second {
background: url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
background-size: 300px;
height: 200px;
}
.third {
background: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif") no-repeat;
background-size: 80px;
height: 100px;
}
With CSS3, you can apply multiple backgrounds to elements. You can also set custom background-position for each background.
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
body, html {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 100vh;
background-image: url("https://pbs.twimg.com/profile_images/604644048/sign051.gif"),
url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif"),
url("http://www.quicksprout.com/images/foggygoldengatebridge.jpg");
background-size: 80px, 300px, cover;
background-repeat: no-repeat;
background-position: 50% 90%, 50% bottom, center;
}
<div></div>
You can place the DIVs on top of each other, with position:absolute. Then your DIVs need a width in order to be visible. Each DIV now can have a z-index with which you can determine who goes on top.
See this fork of your pen.
You can use multiple backgrounds for just one div, using css3, like so:
background:
url(3.png) 600px 10px no-repeat, /* On top, like z-index: 3; */
url(2.png) 100px 100px no-repeat, /* like z-index: 2; */
url(1.png) 50px 50px no-repeat; /* On bottom, like z-index: 1; */
The example code above uses shorthand, but you can also write it like this:
background: url(3.png), url(2.png), url(1.png);/*left to right: top, middle, bottom*/
background-size: 600px 10px, 100px 100px, 50px 50px;
Learn more about multiple backgrounds.
Try out this one :
<div id="container">
<div id="main_image"></div>
<div id="overlay_image"></div>
</div>
#container{
position: relative;
width: 200px;
height: 200px;
}
#main_image{
width: 100%;
height: 100%;
background: blue;
}
#overlay_image{
position: absolute;
bottom: 10px;
right: 10px;
width: 30px;
height: 30px;
background: red;
}
in your case you might just need to change the
background : url("https://estherpgl.files.wordpress.com/2012/06/no-big-deal1.gif") no-repeat;
also you need to adjust the pixel of the images .
Hope this helps
I'm adding a gradient on top of a background-imagewith a single property:
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5)), url('/image-1.jpg');
All my elements with class .gradient have the gradient, but the image changes for each element so I wanted to know if I could set the gradient as a property of .gradient and then change the image url in each element.
<div class="gradient image-1"></div>
<div class="gradient image-2"></div>
<div class="gradient image-3"></div>
Something like this:
.gradient // Add the gradient just once
{
background-color: background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5);
}
.image-1 // Change the image for each element
{
background-image: url('/image-1.jpg');
}
.image-2
{
background-image: url('/image-2.jpg');
}
There is no way you can define and override only one of the multiple background layer, so you need to re declare for each..
Demo
div {
height: 100px;
width: 100px;
background: #eee;
margin: 20px;
background: url('http://www.google.com/images/icons/product/chrome-48.png'), linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
div:nth-of-type(2) {
background: url('http://www.digitalkonline.com/Portals/86261/images/agree-icon.png'), linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%)
}
The other way to achieve this is to have background on the parent element, and another background on the child element, so a nesting trick
Demo 2
div.wrap {
height: 100px;
width: 100px;
background: #eee;
margin: 20px;
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
div.wrap div {
height: 100%;
width: 100%;
}
div.hold > div.wrap:nth-of-type(1) > div {
background: url('http://www.digitalkonline.com/Portals/86261/images/agree-icon.png');
}
div.hold > div.wrap:nth-of-type(2) > div {
background: url('https://www.google.com/images/icons/product/chrome-48.png');
}
I am not sure if it will work with gradient.
However when we want to add 2 images I use background-size:contain;
background-image: URL("../images/imageName1.png"), URL("../images/Icone/imageName2.png");
background-size:contain;
background-repeat: repeat-x, no-repeat;
The first repeat will be for the first image and so on.
I'm trying to create a banner which spans the page width. A centered container measuring 1130px within this region holds five blocks of color at 20% of the container. Behind this container should be two divs at 50% each - one containing the first color swatch and the other containing the last to create a seamless palette but maintain the same width.
The issue I'm having at the minute is that the .modal-container which holds the five colour blocks will not display on top of the two background blocks .modal-left and .modal-right. I've tried tinkering with the z-index values of all three classes to no avail. position: absolute isn't an option either as this knocks the margin: 0 auto alignment off. Any ideas?
JSFiddle
The effect I'm looking for
EDIT:
I just got really carried away and did a total overhaul on that code. I'M SORRY I COULDN'T HELP MYSELF LOL
New and improved ya dig.
Your HTML simply needed some re-arranging. The inner div placed above the other two fixed it right up.
CSS (updated):
.modal {
background-image: -webkit-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -moz-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -ms-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: -o-linear-gradient(right, #3e454c 50%, #ff7f66 50%);
background-image: linear-gradient(to left, #3e454c 50%, #ff7f66 50%);
background-size: cover;
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
height: 54px;
width: 100%;
max-width: 1130px;
}
.modal-inner {
position: relative;
max-width: 1130px;
}
.modal-block {
float: left;
width: 20%;
height: 27px;
}
.una {
background: #3e454c;
background: rgba(62, 69, 76, .5);
}
.dos {
background: #2185c5;
background: rgba(33, 133, 197, .5);
}
.tres {
background: #7ecefd;
background: rgba(126, 206, 253, .5);
}
.cuatro {
background: #fff6e5;
background: rgba(255, 246, 229, .5);
}
.cinco {
background: #ff7f66;
background: rgba(255, 127, 102, .5);
}
HTML (less is more :) ):
<div class="modal">
<div class="modal-inner">
<div class="modal-block una"></div>
<div class="modal-block dos"></div>
<div class="modal-block tres"></div>
<div class="modal-block cuatro"></div>
<div class="modal-block cinco"></div>
</div>
</div>
See demo here http://jsfiddle.net/Godinall/cq27S/3/
First, re-arrange your divs to put the 50/50 underneath
Second, and most importantly, add this to .modal-inner
I believe this is better solution than setting position/margins
display:block;