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.
Related
Trying to create this site and fairly new to html, trying to find ways of just adding a simple bar across or over
my background, without it repeating with the background image, i just want the thing at the top
like a background to the nav bar,
kinda tried just adding the enter code herecolor to the background img on photoshop, but of course it repeats that, which aint what im looking for
heres my stuff some helps appreciated.
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
position:absolute;
}
/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 25px;
}
/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #000;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
padding-top:50px;
}
}
<link href=CrimsonRainer Site/CrimsonRainer.css" rel="stylesheet" type=text/css>
* {
margin: 50;
padding-top: 50;
}
html,
body {
overflow:auto;
background-color: #021027;
background-image:url("sky.jpg");
background-repeat:repeat;
background-size:cover;
}
An element can have several background images, and they each can be set to repeat or not individually. One of the images could be a linear-gradient with your color in it.
The background images are 'drawn' in reverse order, that is, the one that is listed first will overwrite the next one listed and so on.
Not knowing exactly what you want here is a little example where the div has a repeating background image but at the top is a colored bar which is not repeated.
div {
width: 100vw;
height: 100vh;
background-image: linear-gradient(cyan, cyan), url(https://picsum.photos/id/1015/200/300);
background-size: 100% 20%, 20% auto;
background-repeat: no-repeat no-repeat, repeat repeat;
}
<div></div>
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 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.
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 .
Sorry if the layout of the question seems weird, I've wrote this question now for about 10 times over and over again in this editor, resulting always in getting an error message "unformatted code found etc." - so I removed all the code and placed picture examples. (2 hours for a simple question)
Hello folks!
I do have a .png image, containing several icons that works as CSS Sprite.
The creation of each CSS class for that is no problem as I use a generator for that. (works like a charm)
The problem is, that I want to use, for example: The created .iconInfo_32 class, as background property for another css class.
What I want to achive?
Simple said, a custom css - messagebox, with an icon on the left side.
The icon itself is in original a sprite containing multiple icons.
That's where the problem starts.
What I have
The Icons
(thats one PNG)
The Icon I want to use
How the result should look like
How it actually looks
Use another div, in a div
Yes, that would work - but I'd like to have "one" css class, without the need to put always a div, into another div, say where the position should be and so on - also I had problems with the position of the div.
I've provided a source example, hopefully this will help being able to understand my question and my goal.
Excuse me if the layout of my question is unusual and unpleasent, I would have done it in another way, but the editor just won't let me
Source
HTML
<div class="warning_without_sprite">
This is a DIV container<br />
showing an error message with the use of 'close_32.png' as Icon. (No Sprite)
</div><br /><br /><br /><br />
<div class="warning_with_sprite">
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS
<style type="text/css">
.iconInfo_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -0px -0px; }
.iconOk_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -32px -0px; }
.iconAdd_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -64px -0px; }
.iconClose_2_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -96px -0px; }
.iconClose_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -128px -0px; }
.iconDelete_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -160px -0px; }
.iconDownload_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -192px -0px; }
.iconHelp_32 { width: 32px; height: 32px; background:url(images/icons.png) no-repeat -224px -0px; }
.warning_without_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/close_32.png');
}
.warning_with_sprite {
border: 1px solid;
padding: 10px 10px 10px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float:left;
color: #D8000C;
background: #FFBABA url('images/icons.png') no-repeat -128px -0px;
}
</style>
>> Download as RAR. <<
It's because you've set it as a background-image across the whole <div> element and because the sprite contains multiple images it will show them all. You can't specify how much of that sprite to show.
You'll have to insert a <span> element into your <div>. This will allow you to specify the size of the span and position it relative to your div container.
<div class="warning">
<span class="warning_with_sprite"></span>
This is a DIV container<br />
showing an error message with the use of 'icons.png' as Icon. (Sprite)
</div>
CSS:
.warning_with_sprite {
position:absolute; left:16px; top:16px;
background-repeat: no-repeat;
background-position: 10px center;
width:20px; height:20px;
background: url('http://i5.minus.com/id1CYq.png') no-repeat -133px -2px;
}
.warning {
float:left;
color: #D8000C;
border: 1px solid;
position:relative;
padding: 10px 10px 10px 50px;
background: #FFBABA;
}
See a demo here
Note: you'll have to change the image back to your sprite and the top, left, height and width properties will have to change inline with your requirements