I have an svg image that I would like to be contained inside of a white button, however, inserting it into the background in CSS covers the white color of the button completely. How does one avoid this in CSS?
Button with svg background:
#rack-button {
position: absolute;
background: url('simple_rack.svg') no-repeat top left;
background-size: contain;
display: inline-block;
width: 35px;
height: 35px;
left: 10%;
border-radius: 5px;
color:#fff;
}
Button without svg background:
#rack-button {
position: absolute;
width: 35px;
height: 35px;
left: 10%;
border-radius: 5px;
color:#fff;
}
Your initial button CSS has no background-color stated so this must be stated somewhere else in your CSS.
#rack-button {
position: absolute;
width: 35px;
height: 35px;
left: 10%;
border-radius: 5px;
color:#fff;
}
When you added the image background you overrode the original background color and substituted a transparent image, so the body background shows through
#rack-button {
position: absolute;
background: url('simple_rack.svg') no-repeat top left;
background-size: contain;
display: inline-block;
width: 35px;
height: 35px;
left: 10%;
border-radius: 5px;
color:#fff;
}
You just need to add the background color back
#rack-button {
background: white url('simple_rack.svg') no-repeat top left;
}
or
#rack-button {
background: url('simple_rack.svg') no-repeat top left;
background-color:white;
}
Related
I have a div :
<div class="titre_section" id="identity_section_titre_section">Identité du déclarant</div>
i need to put a background outside the div to apply a bigger height than the div
for the moment i have :
.titre_section {
position: relative;
#include media-breakpoint-down(sm) {
top: -2em;
}
top: -5em;
left: -2em;
padding-left: 20px;
font-family: $titre_section-font-family;
font-style: normal;
font-weight: bold;
font-size: 22px;
line-height: 25px;
letter-spacing: 0.25px;
color: $form-dark-color;
background: url("/custom/images/titre_section_rectangle.png") no-repeat;
background-size: contain;
}
here the result :
i tried to make this in order to modify the height of the background :
.titre_section::before{
content: "";
background: url("/custom/images/titre_section_rectangle.png") no-repeat;
background-size: contain;
}
but it's not working i don't see the background.
the result need to be like. i can't edit the html because we use zend form system
Here's a quick example using position: absolute to ensure that the background doesn't take up space, and z-index to ensure that the background is behind the content.
.section {
position: relative;
}
.section:before {
content: '';
position: absolute;
width: 400px;
height: 100px;
background: red;
z-index: -1;
}
<div class="section">Identité du déclarant</div>
<div>Lorem ipsum</div>
I have used :pseudo element to add the border effect in the left
.titre_section {
position: relative;
padding: 0px 0 10px 35px;
border-bottom: 1px solid #d2cfc7;
font-weight:bold;
margin-bottom:20px
}
.titre_section:before {
content: '';
position: absolute;
top: 0;
bottom: -20px;
width: 2px;
background: #bb8f29;
left: 20px;
}
<div class="titre_section" id="identity_section_titre_section">Identité du déclarant</div>
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
I want to draw a line below a link and apply animation on it, so I use pseudo element. It produces the line as expected, but if there is a large padding around the link, the line appears far away. Is there a way to ignore the padding and draw the line right below text?
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
}
a:after {
position: absolute;
bottom: 0;
left: 0;
width: 0;
content: '';
transition: width .3s;
display: block;
}
a:hover:after {
width: 100%;
border-top: 1px solid #333;
}
<a>Link Text</a>
You can just remove the absolute position since the pseudo is set on :after so that it's placed right after the text.
a {
position: absolute;
padding: 20px 0;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
line-height: 20px;
border: 1px solid aqua;
}
a:after {
content: "";
display: block;
border-top: 1px solid #333;
width: 0;
transition: width .3s;
}
a:hover:after {
width: 100%;
}
<a>Link Text</a>
Side note, you might encounter the double tap behavior for the kind of hover effects on touch devices such as phones, tablets. Add this to fix that:
#media (hover: none) {
a:hover:after {
display: none;
}
}
In addition, the effects can also be done with linear-gradient(), example:
a {
display: inline-block;
text-decoration: none;
border: 1px solid aqua;
font-size: 16px;
padding: 20px 0;
background-image: linear-gradient(to bottom, blue, blue);
background-position: 0 38px; /*adjust this based on font-size and padding*/
background-size: 0 1px;
background-repeat: no-repeat;
transition: background-size .3s;
}
a:hover {
background-size: 100% 1px;
}
Link text
Is it possible to have something like this :
So I have an element
<span class="custom"> 6 </span>
that has this css:
background: lightblue;
color: white;
border-radius: 50px;
When selected.
This creates the circle. But what I need is that this element has also a background with lighter blue, that is not rounded.
Is it possible to some way achieve this and have the element have two background ?
The circle one being on top ?
You can have a div container to have the linear gradient background and another div inside it containing the circular div with 6 in the center aligned using flexbox.
.bg {
background: linear-gradient(to right, #eeeeee 50%, #aaaaff 0%);
width: 80px;
margin: 20px;
}
.custom {
margin: 0 auto;
width: 50px;
height: 50px;
background: #7070ff;
color: white;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="bg">
<div class="custom"> 6 </div>
</div>
You can use linear-gradient with pseudo element to achieve the second background like this :
.custom {
color: white;
padding: 10px;
margin: 50px;
width: 40px;
height: 40px;
box-sizing: border-box;
display: inline-block;
position: relative;
text-align: center;
}
.custom:after {
content: "";
position: absolute;
background: lightblue;
border-radius: 50%;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
}
.custom:before {
content: "";
position: absolute;
top: 0;
right: -20px;
left: -20px;
bottom: 0;
background: linear-gradient(to right, #ccc 50%, red 0%);
z-index: -2
}
<span class="custom">6</span>
You can use two element on each other then set background with opacity lower than 1 for upper element now you have two background.
The code below will create an arrow right below an <a> element:
JSFiddle
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
Hello!
The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate the border width in pixels.
How to make a responsive triangle percent based?
You could use a skewed and rotated pseudo element to create a responsive triangle under the link :
DEMO (resize the result window to see how it reacts)
The triangle maintains it's aspect ratio with the padding-bottom property.
If you want the shape to adapt it's size according to it's content, you can remove the width on the .btn class
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
Hello!
For more info on responsive triangles and how to make them, you can have a look at
Triangles with transform rotate (simple and fancy responsive triangles)
Another solution to this would be to use a CSS clip-path to clip a triangle out of a coloured block. No IE support however, but could be used for internal tools etc.
DEMO
Written with SCSS for ease.
.outer {
background: orange;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
p {
margin: 0;
text-align: center;
color: #fff;
}
&:after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
padding-bottom: 10%;
background: orange;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}
}
I found solution that works with any width/height. You can use two pseudo-elements with linear-gradient background, like this, (fiddle):
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:before {
content: "";
position: absolute;
top: 100%;
right: 0;
width: 50%;
height: 10px;
background: linear-gradient(to right bottom, gray 50%, transparent 50%)
}
.btn:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 50%;
height: 10px;
background: linear-gradient(to left bottom, gray 50%, transparent 50%)
}
A modified version of the below code can help you to achieve this
HTML
<div class="triangle-down"></div>
CSS
.triangle-down {
width: 10%;
height: 0;
padding-left:10%;
padding-top: 10%;
overflow: hidden;
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
margin-top:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid #4679BD;
}
For further reading on responsive triangles: CSS triangles made responsive
(archived link)
I tried the other answers and found them to be either too complex and/or unwieldy to manipulate the shape of the triangle. I decided instead to create a simple triangle shape as an svg.
The triangle height can be set to an absolute value, or as a percentage of the rectangle so it can be responsive in both directions if necessary.
html, body{
height:100%;
width:100%;
}
.outer{
width:20%;
height:25%;
background:red;
position:relative;
}
.inner{
height:100%;
width:100%;
background-color:red;
}
.triangle-down{
height:25%;
width:100%;
position:relative;
}
.triangle-down svg{
height:100%;
width:100%;
position:absolute;
top:0;
}
svg .triangle-path{
fill:red;
}
<div class="outer">
<div class="inner"></div>
<div class="triangle-down">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 2 1">
<g>
<path class="triangle-path" d="M0,0 l2,0 l-1,1 z" />
</g>
</svg>
</div>
Tested FF, Chrome, IE, Edge, mob Safari and mob Chrome
Another option would be to use background liner gradients, and flex positioning to make sure that the triangle always scales to its parent container. No matter how wide or narrow you make that container, the triangle always scales with it. Here is the fiddle:
https://jsfiddle.net/29k4ngzr/
<div class="triangle-wrapper-100">
<div class="triangle-left"></div>
<div class="triangle-right"></div>
</div>
.triangle-wrapper-100 {
width: 100%;
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}
.triangle-right {
right: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
}
.triangle-left {
left: 0px;
background: linear-gradient(to right bottom, #6940B5 50%, transparent 50%);
width: 50%;
height: 100px;
transform: scaleX(-1);
}
I took #Probocop's answer and come up with the following:
<style>
.btn {
background-color: orange;
color: white;
margin-bottom: 50px;
padding: 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.btn:after {
background-color: inherit;
clip-path: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="p" clipPathUnits="objectBoundingBox"%3E%3Cpolygon points="0 0, 1 0, 0.5 1" /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E#p'); /* fix for firefox (tested in version 52) */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
content: '';
height: 50px;
left: 0;
position: absolute;
right: 0;
top: 100%;
}
</style>
Hello!
This works in Chrome and I've added a fix for Firefox. It doesn't work in Edge, however if you decrease the height of the down arrow then it doesn't look so bad.
Please note that if you are using bootstrap you will need to either change the name or override some of the styles it applies. If you decide to rename it then you also need to add the following to the .btn style:
box-sizing: content-box;