How to set two images in single background-image? I have two pictures but there is an issue with separating this two (one is overlying on another).
Below is my style for that div.
.layout_core_menu_logo {
padding: 20px 0 0px 0;
background: url(~/application/xxx.gif) transparent no-repeat top;
background-size: 968px 200px;
a {
background: url("/application/xx1.gif?c=573") no-repeat,url("/application/themes/xx2.gif")no-repeat;
width:1160px;
height: 187px;
display: block;
text-indent: -9999px;
position: relative; top: 20px; left: 0px;
}
}
You need to specify the position and background size of each image.
.layout_core_menu_logo {
padding: 20px 0 0px 0;
background: url(http://www.mvploops.com/files/_willow/categories/281_Sample- Packs.jpg) transparent no-repeat top;
background-size:100% 100%;
}
a {
background: url("http://www.detailinggurus.com/images/sample_bottles.jpg") no-repeat top left,url("http://www.mclub.com.ua/images/alb/cover42163_148565.jpg")no-repeat top right;
background-size:50% 100%, 50% 100%;
width:968px;
height: 187px;
display: block;
text-indent: -9999px;
position: relative; top: 20px; left: 0px;
}
Sample Fiddle
<style>
a {
background:url("/application/xx1.gif?c=573&c=573") no-repeat scroll 51% 60%,
url("/application/xx2.gif?c=573") no-repeat scroll 0% 20% transparent ;
}
<style>
Related
I'm trying to create a reusable widget. It will have some sort of background image, with a transparent text overlay. The background of the text overlay will be mostly square, but have one transparent corner. Is there an easy way to do this using CSS?
You can use linear-gradient background. Here is your reusable widget. Cheers!
img {
display: block;
width: 100%;
}
.img-widget {
width: 250px;
height: auto;
position: relative;
}
.img-widget .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
background: transparent;
text-align: center;
background-image: linear-gradient(118deg, transparent 0%, transparent 10%, #7AAD7A 10%, #7AAD7A 60%);
display: inline-block;
vertical-align: middle;
}
.img-widget .overlay:after {
display: inline-block;
vertical-align: middle;
content: '';
height: 100%;
}
<div class="img-widget">
<img src="http://placehold.it/200x200" />
<div class="overlay">Some text here</div>
</div>
#green-overlay {
background: linear-gradient(135deg, transparent 30px, rgba(0,0,0,.5) 0) top left;
add the rest of your css for this element
}
Something like this should work. Just replace the rgba value and 30px with how deep you want the corner.
https://jsfiddle.net/snavy/acbo36n2/
Try something like the following (LIVE PEN HERE):
HTML
<div class="row">
This div has a background image
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
CSS
html, body {margin: 0; padding: 0;}
#rightDivider {
width: 80%;
height: 100px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 100px 60px;
border-color: transparent transparent blue transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 100px;
right: 0;
left: 0;
}
.row {
background: orange;
position: relative;
height: 300px;
padding: 0;
margin: 0;}
You could try using css3's -webkit-clip-path: polygon(); attribute to solve your issue.
See reference here: CSS3 clip-path
I have the following HTML + CSS:
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
<div class="item">
<div class="gradient">
</div>
</div>
It's rendered in the browser properly. But on mobile (see the attached screenshot) there's a one thick line across the gradient, I have no idea why is that.
Here's also I js fiddle: https://jsfiddle.net/tcxka242/1/
First I thought that is repeated vertically as well, but the inspector says that the rule I've set: background: url(...) repeat-x center bottom; is expanded to :
background-image: url("http://i.imgur.com/oSpOTeK.png");
background-position-x: 50%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
That's on Android Phone with Google Chrome.
Sorry but i cannot properly verify this , but i have an idea for you .
.item .gradient {
width:100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
outline: 0;
border: none;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
}
As you can see i have set the outline to 0 and the border to none . There's a possibility that there is an outline from the div or a hidden border .
Specifying border-top: 0px; and box-shadow: none; will work for you
.item .gradient {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
box-shadow: none;
left: 0;
background: url('http://i.imgur.com/oSpOTeK.png') repeat-x center bottom;
border-top: 0px;
}
I think this is caused on screens with high DPI. Therefore I am providing a CSS-only alternative.
https://jsfiddle.net/tcxka242/6/
.item {
position: relative;
width: 400px;
height: 400px;
background: url('http://i.imgur.com/FOmRt87.jpg') no-repeat;
}
.item:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);
}
I am trying to make a loading gif to be on the center of the page also in mobiles.
Have tried
margin: 0 auto;
but i had no luck.
#bw-preloader, #bw-preloader:after {
background:url(http://i.imgur.com/ImksiyD.gif) !important;
background-repeat: no-repeat !important;
border-radius: 0% !important;
width: 256px !important;
height: 256px !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
margin: -50px 0px 0px -50px; !important;
}
#bw-preloader {
border: 0px !important;
-webkit-transition: opacity 10s !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
margin: -50px 0px 0px -50px; !important;
}
#media only screen and (max-width: 500px) {
#bw-preloader {
position: fixed !important;
top: 50% !important;
left: 50% !important;
margin: -50px 0px 0px -50px; !important;
}
}
You can see it live here
Could someone check it out if im missing something?
Also have tried
position: absolute;
This example code might help.
HTML
<div class="image-container">
<p class="image-holder">
<img src="loading.gif" />
</p>
</div>
CSS
div.image-container {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
bottom: 0;
background-color: #fff;
z-index: 999999;
text-align: center;
}
.image-holder {
position:absolute;
left: 50%;
top: 50%;
width: 30px;
height: 30px;
}
.image-holder img
{
width: 100%;
margin-left: -50%;
margin-top: -50%;
}
JS
$('div.image-container').delay(350).fadeOut('slow');
You need to adjust your CSS as follows:
#bw-preloader, #bw-preloader:after {
background: url(http://i.imgur.com/ImksiyD.gif) !important;
background-repeat: no-repeat !important;
border-radius: 0% !important;
width: 256px !important;
height: 256px !important;
margin: -128px 0 0 -128px;
}
You need to adjust the top and right margins by half the height and width respectively.
try the following:
position:absolute;
width:256px;
height:256px;
top:50%;
left:50%;
margin: -128px 0 0 -128px;
z-index:1000;
position absolute with the top:50% and left:50% move the elements left top part to the middle that is why you need to give it the negative margin of half the object witdht/height.
hope it helps
I need to squash a div in vertically, using css3, the div need to have 100% width to fit in full window, but i don't know how. Thanks.
http://i.stack.imgur.com/vqUs8.png
(Updated, due to the request with an image behind the <div>)
A possible way if the background has only one color (white in this case)
div {
background-color: #000;
height: 200px;
margin: 40px 0 0;
position: relative;
overflow: hidden;
width: 100%;
}
div::before,
div::after {
border-radius: 140px / 20px;
content: "";
display: block;
height: 100px;
position: absolute;
width: 100%;
}
div::before {
box-shadow: 0 50px 0 10px #FFFFFF inset;
bottom: -80px;
}
div::after {
box-shadow: 0 -50px 0 10px #FFFFFF inset;
top: -80px;
}
http://jsfiddle.net/kmjLqrq2/
The css above uses two pseudoelements to make two ellipses above the <div>.
The problem now, if we have a background-image hiding behind the <div> is that our two ellipses will overlap our image.
Enter radial-gradient:
We can change our two pseudoelements now and give them an transparent ellipse as a background-image which will "fade" to black.
div::before,
div::after {
background-size: 100% 50px;
background-repeat: no-repeat;
content: "";
display: block;
height: 25px;
position: absolute;
width: 100%;
}
div::before {
background-image: -webkit-radial-gradient(center center, ellipse cover, rgba(0,0,0,0) 75%, #000 76%);
background-position: center bottom;
top: -25px;
}
div::after {
background-image: -webkit-radial-gradient(center center, ellipse cover, rgba(0,0,0,0) 75%, #000 76%);
background-position: center top;
bottom: -25px;
}
http://jsfiddle.net/kmjLqrq2/1/
(Note that the example above is only for Webkitbrowsers to keep it simple, please remember to use all vendor prefixes)
Presently I am working on different types of triangle shapes by using border-bottom, border-top, border-left, border-right. Up to this I am getting OK with background color.
But I need to get this shapes by placing background images(without cutting any background images). I tried to do this by using border but no luck.
Example for this
You have 2 ways to get this effect:
The first one is supported only in WebKit, and you will need only one div.
The second one is supported in all modern browsers, but your HTML is less clean, and needs a helper div.
In the code below, test is the first example and test2 and inner2 the second example:
.test {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
display: inline-block;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
-moz-clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
clip-path: polygon(0px 0px, 100% 100%, 0px 100%);
}
.test2 {
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
overflow: hidden;
display: inline-block;
}
.inner2 {
position: absolute;
width: 140%;
height: 100%;
left: 0px;
top: 0px;
-webkit-transform: rotate(37deg);
-webkit-transform-origin: top left;
transform: rotate(37deg);
transform-origin: top left;
overflow: hidden;
}
.inner2:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-transform: rotate(-37deg);
-webkit-transform-origin: top left;
transform: rotate(-37deg);
transform-origin: top left;
}
<div class="test"></div>
<div class="test2"><div class="inner2"></div></div>
JSFiddle
The first example uses clipping to get the image cut in triangle shape (only the front image, the other remains rectangular).
The second example uses overflow hidden and a rotation to get the triangular shape. Then, you need the opposite rotation to get the image straight.
In the first example, you can do almost whatever shape you want. For instance,
-webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%);
gives you this:
.test {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
background-image: url(http://placekitten.com/440/330);
display: inline-block;
}
.test:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: url(http://placekitten.com/300/400);
background-size: cover;
-webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%);
}
<div class="test"></div>
JSFiddle