I am trying to a background image over background image but it hides the first one image . My code is as follows
<li class="collapsed">
<a>Getting Started</a>
</li>
.collapsed {
background-image: url(../images/expand_new1.png)!important;
background-repeat: no-repeat;
background-position: 141px 5px;
background-size: 35px;
-moz-background-size: 30%;
-webkit-background-size: 30%;
z-index:50;
li.collapsed a{
opacity: 0.8;
background-image: url(../images/assets/faq/faq_list_bg.png);
display:block;
padding-left:27%;
font-family: 'Roboto';
font-size: 20px;
font-weight: 300;
color: #fff;
z-index:-1;
I want to display expand_new1.png display top of faq_list_bg.png
please help to resolve this issue.
expand_new1.png image is white and faq_list_bg.png image is blue . it totally hide the first image.
[![When i replace the plus icon with white color plus icon then image disappears][1]][1]
Remove
background-image: url(../images/assets/faq/faq_list_bg.png);
EDIT BASED ON NEW INFO:
li.collapsed a:after {
background-image: url('../images/expand_new1.png');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}
http://puu.sh/pBTSS/ffc491e491.png
If you want to change the + to a - or nothing all together once expanded:
li.collapsed.expanded a:after {
background-image: url('NEW IMAGE LINK HERE');
background-size: 20px 20px;
display: inline-block;
width: 20px;
height: 20px;
content: "";
}
It hides the first image because you used the z-index property but didn't set the position value.
z-index is not working because it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative.
In your case, set position for both to absolute.
Related
I tried to get a background image on the right side of the header, but when I use: background-position: right; or float: right; then it doesn't do anything and I'm not sure if it's possible to style one background image specifically in css when they are both in the same class.
(the image on the left is good as it is, just an example to show that it has multiple backgrounds)
https://jsfiddle.net/qeysvr6c/82/
/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */
.h1_content {
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat; /* pattern for the header, left magnifying glass */
background-size: 4%;
background-color: #00a8f3;
color: white;
}
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-position: right; /* Doesn't go right? */
background-repeat: no-repeat;
position: absolute;
background-size: cover;
width: 50px;
height: 50px;
}
<article class="text_bottom">
<section class="section_test">
<h1 class="h1_content">Topic here</h1>
<p>Random text here</p>
</section>
</article>
Add position:relative to the heading and right:0 to the :after psuedo-element. Since the :after is position:absolute it will dock to the position relative parent.
There's other ways you could do this with one element, by using multiple background images for example. But this should do the trick.
/* Using example images, since I don't know how to add patterns into jsfiddle without having to download them */
.h1_content {
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg) no-repeat; /* pattern for the header, left magnifying glass */
background-size: 4%;
background-color: #00a8f3;
color: white;
position: relative;
}
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-position: right; /* Doesn't go right? */
background-repeat: no-repeat;
position: absolute;
right: 0;
background-size: cover;
width: 50px;
height: 50px;
}
<article class="text_bottom">
<section class="section_test">
<h1 class="h1_content">Topic here</h1>
<p>Random text here</p>
</section>
</article>
the ::after pesudo element doesnt have the enough width to go to the right so if you give it the space it will be pushed to the right and background-size should be 50px or contain to maintain its ratio :
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-repeat: no-repeat;
background-position: right;
position: absolute;
background-size: contain;
width: 85%;
height: 50px;
}
or simply just give the parent element position relative and the child should have right:0 :
.h1_content::after {
content: "";
background: url(https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg);
background-repeat: no-repeat;
background-position: right;
position: absolute;
right: 0;
background-size: cover;
width: 50px;
height: 50px;
}
I am having a problem with creating a hover effect with a PNG image and CSS. As the image below shows the image is a triangle notch. I am trying to make the background color extend left from the image and not overlap it as is happening in my example.
Hover Background and Image
.parent-1:hover, .parent-2:hover, .parent-3:hover {
background: #993408 url(/images/brown-notch.png) no-repeat right;
background-size: contain;
position: relative;
padding-left: 10px;
color: #fff !important;
z-index: 1;
}
Is there a way to make the background end where the image starts, so it becomes an arrow and be responsive?
I attempted this but it does not work responsively:
.parent-1:hover::before, .parent-2:hover::before, .parent-3:hover::before {
content: '';
background-color: #993408;
background-position: left;
position: absolute;
display: block;
left: 0;
z-index: -1;
font-size: 1rem;
width: 96%;
height: 100%;
}
Assuming your image is 10px set the width on your :before elements to:
width: calc(100% - 10px);
I'm using a CSS Sprite Sheet technology and have a problem with multiple backgrounds.
In this website - https://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_img you can see how to set a background from a sprite sheet but my case is a bit different.
Simple code:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat, url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: auto;
height: 40px;
background-size: 319px 349px, auto;
}
<div id="nav1"></div>
And the problem is I don't want to show these 2 icons. I want to show only the first one:
How could I make it? I've tried height and width properties but I think it's not for multiple backgrounds.
It is not possible to crop each image in a multiple-background setting separately. So if you want to keep the yellow bar, but only show one icon on it, consider using a pseudo-element, or an actual DOM element reserved to displaying single icons. E.g. here with an <i>:
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
background-size: auto;
height: 40px;
width: auto;
}
i.icon1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
background-size: 319px 349px;
display: inline-block;
height: 40px;
width: 40px;
}
<div id="nav1"><i class="icon1"></i></div>
If you want to make sure it stays in the background, use z-index. If you want to make sure it doesn't interfere with the content of #nav1, use position: absolute; top: 0; left: 0 as well.
You would have to specify a width.
#nav1 {
background: url(https://n3olukas.000webhostapp.com/images/nav-icons.png) -165px -19px no-repeat;
width: 40px;
height: 40px;
background-size: 319px 349px, auto;
position: relative;
}
#nav1:after {
content: "";
background: url(https://n3olukas.000webhostapp.com/images/x3_1.png) no-repeat;
width: 232px;
height: 40px;
position: absolute;
z-index: -1;
}
<div id="nav1"></div>
I have an icon set as background, as shown below:
As you can see there must be padding right after the arrow to have nice space.
How can I solve this issue?
HTML
<span class="arrowIcon">Newsletter Sign up</span>
CSS
.arrowIcon{
background-image:url(../img/arrow.png);
background-position:right center;
background-repeat:no-repeat;
background-color:#5379A5;
padding:10px;
color:#FFFFFF;
float:right;
width:55%;
}
You can position a background image FROM the right by writing this in your css.
background-position: right 10px center;
I consider this to be the cleanest solutions.
You can do it with calc.
#test {
background-color: moccasin;
width: 500px;
height: 100px;
background-image: url('http://www.math.muni.cz/~bulik/gifs/arrow.small.left.gif');
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
}
<div id="test">
</div>
You can add a right border with the same color as the background :
border-right: 10px solid #5379A5;
A background image does not take padding into account, use background-position for that or split up your <span> into <span>newsletter sign up<img></img></span> .
Here it is :
.arrowIcon {
background-image: url(http://www.clker.com/cliparts/7/6/4/a/1206569902228245216pitr_green_single_arrows_set_1.svg.hi.png);
background-position: 95% center;
/* adjust the 98% as your needs or put px value instead if you know extact div size */
background-repeat: no-repeat;
background-color: #5379A5;
background-size: 1em;
padding: 10px;
color: #FFFFFF;
float: right;
width: 55%;
/* to display correctly in SO */
position: absolute;
top: 25%;
right: 0px;
}
<span class="arrowIcon">Newsletter Sign up</span>
Since, you have given float:right its going to be in right .
So I have a list item with a background image. When a user hovers over the list item, I want the background item to change. I'm using this:
li { width: 400px; height: 80px;
background-repeat: no-repeat; background-position: 10px 10px;
background-image: url('myimg.png'); }
li:hover { background-image: url('myimg-hover.png'); }
Unfortunately this causes a bit of a flicker the first time you view the page and hover over an item.
I'd rather combine the images into one image, and just change the background image position when you hover over the list item.
The images combined into one is 25px wide and 50px tall, with the image displayed being only 25px x 25px.
I tried this:
li { background: url('mynewimg.png') 0 0; }
li:hover { background: url('mynewimg.png') 0 -25px; }
But that just shows the entire image since my list item is so large, and doesn't position it right.
Anyone know how I can do this?
What I can do like :
<li class="icon"><i></i></li>
.icon {
width:25px;
height:50px;
display:table-cell;
vertical-alignment:middle;
}
.icon>i
{
background:url();
background-position:<value>px,<value>px
}
.icon:hover>i{
background-position: <value>px,<value>px
}
Hope this solution solves your problem.
Your CSS should be:
li {
width: 400px; height: 80px;
background-repeat: no-repeat;
background-size: 50px 50px;
background-position: 10px 10px;
background-image: url('mynewim.png');
background-origin: 0px 0px;
}
li:hover {
background-origin: 50px 0px;
}
You have to set the size explicity, and then play with origin
Without jsFiddle I can't visualize the example, but I think you are talking about image sprites. Check out http://css-tricks.com/css-sprites/ for more information about them.