Here is the CSS I pulled from IE:
.hglghts .active.yes-icon, .hglghts .yes-icon {
background: url("../img/yes_sir.png") no-repeat;
width: 27px;
background-position: initial;
display: inline-block;
opacity: 1;
margin-right: -5px;
vertical-align: middle;
height: 17px;
position: relative;
top: 1px;
}
It is not showing. I am using IE11.
Here is what i pulled from Chrome, same thing but this is showing?
.hglghts .yes-icon.active, .hglghts .yes-icon {
background: url("../img/yes_sir.png") no-repeat;
width: 27px;
background-position: initial!important;
display: inline-block;
opacity: 1;
margin-right: -5px;
vertical-align: middle;
height: 17px;
position: relative;
top: 1px;
}
Can anyone please tell me what am I'm doing wrong?
Problem should be in initial background position.
You left top or 0 0 instead.
background-position: left top;
Or better, in one row:
background: url("../img/yes_sir.png") left top no-repeat;
Related
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 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;
}
I want to insert an image in CSS bubble, the code is correct but nothing appears,
can you please check how to solve this one
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*border-radius: 10px;*/
background: linear-gradient(top, #f9d835, #f3961c);
}
now before
.triangle-isosceles:before {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
the last one is after
.triangle-isosceles:after{
content: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
background: #3365d4;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
In the "after" version, you have two errors:
content: This is not the correct tag to specify the background, the correct one would be simply "background"
background: As you may figure by reading the first error, the background property you have defined is the one who is specifiying the background. This tag has to be removed as it will be overwritten if is not deleted.
So the CSS should loke like this:
.triangle-isosceles:after {
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
You should also consider to add compatibility with more browsers. You can find more information at this page: https://www.w3schools.com/cssref/css3_pr_background-size.asp
EDIT: This is an example of a working CSS tag that add a background image to a "div":
#headerwrap {
background: url(../images/homepage/header.jpg) no-repeat center top;
margin-top: 60px;
padding-top: 20px;
text-align: center;
background-attachment: relative;
background-position: center center;
min-height: 600px;
width: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Hope this helps :)
You need to add content also, Without content after and before won't work
Like this :
.triangle-isosceles:after {
content :'';
background: url("/web/resources/images/paul.png");
display: block;
position: absolute;
bottom: -130px;
left: 12px;
width: 110px;
height: 110px;
border:0;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
I put together a button using :before and :after elements and IE10/9 are ignoring them completely, as far as I can tell they should be working perfectly in at least those 2 versions.
.buttonSML {
background-position:-35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2.9rem;
font-weight: #font-bold;
height: 55px;
padding: 0 5px;
position: relative;
.text-shadow(0,0,4px);
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: " ";
position: absolute;
top: 0;
height: 55px;
width: 20px;
display: inline-block;
visibility: visible
}
.buttonSML:before {
background-image: url('../images/sprite.png');
background-position: 0px -432px;
background-repeat: no-repeat;
background-color: transparent;
left: -20px;
}
.buttonSML:after {
background: url('../images/sprite.png');
background-position: -394px -432px;
background-repeat: no-repeat;
background-color: transparent;
right: -20px;
}
Added a jsfiddle so you can see the end result http://jsfiddle.net/7D4kG/1/
Not really sure what up so would appreciate any advice you guys can provide.
After some work I found 2 solutions.
FIrst is with the help of jquery, you can replace with and add
$('#button-id').click(function ()
{
$('#form-id').submit();
});
Works well, but you loose HTML5 form validations.
To keep the validations you can skip the jquery and just add "overflow: visible" to your buttons style. Have only tested it in IE10 so far, will test the rest later when I republish.
http://jsfiddle.net/3MHHs/1/
I have made some changes and it works for me in Chrome and IE10. I completely removed the positioning, because that is very ...advanced thing in pseudos. Browsers fail on simpler cases too. I have removed the 5px padding too.
.sprite {
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png')
}
.buttonSML {
background-position: -35px -432px;
background-color: transparent;
border: none;
text-transform: uppercase;
font-size: 2rem;
height: 55px;
padding: 0;
cursor: pointer;
}
.buttonSML:before, .buttonSML:after {
content: "";
width: 20px;
height: 55px;
font-size: 2rem;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-color: white; /* sorry */
background-image: url('https://dl.dropboxusercontent.com/u/6374897/sprite.png');
}
.buttonSML:before {
background-position: 0px -432px;
}
.buttonSML:after {
background-position: -394px -432px;
}
I'm building a menu with 100% width - and I'm trying to position one button on the left side and one on the right side.
This is what I have, however as you can see the button is not placed 8px from the right.
How would I go about it? Thanks!
#options-buttons {
height: 40px;
width: 100%;
}
.okay_button
{
position: relative;
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: left;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
.okay_button:hover
{
background-position: 0 -34px;
}
Use float right and right; jsFiddle
.okay_button
{
top: 3px;
right: 8px;
background-image:url('http://i.imgur.com/RIIV8.png');
float: right;
display: block;
width: 68px;
height: 34px;
background-repeat: no-repeat;
outline: none;
}
Working example (I replaced the background with text for demo purposes):
You are mixing float, display, and position incorrectly.
You simply need to change position: relative; to position: absolute; on your .okay_button, since that will force it to be relative to its container, not its otherwise normal position.
Working example: http://jsfiddle.net/zPkH8/3/
.okay_button
{
position: absolute;
...
}