I am trying to move the background image [arrow] to the extreme right of the button, I need approx 10px or 15px padding from the right side of the input button like this: jsfiddle.net/44f61m5e/
HTML:
<input type="button" value="Add a new row" class="button_add" />
CSS:
input.button_add {
height: 32px;
padding-right: 36px;
border: 1px solid #000;
background: #ff9900 url(http://placehold.it/16x16) no-repeat right; cursor: pointer;
}
Demo : http://jsfiddle.net/Tk68M/150/
Can anyone suggest the better way without adding an image tag like this: jsfiddle.net/44f61m5e/
Thanks in advance.
This one worked for me and solved my issue:
background-position:right 10px center;
It´s not possible use the background like this, you can´t set "15px from the right side".
Only way is to use another element as in your second fiddle. Or have the background image wider, the image has to include the arrow and right whitespace too. Than you can use background-position: right.
Of course, when you want to move the arrow a few pixels left/right, you need to edit this image. Better is to use button and the second element for the arrow.
use background-position property like this-
background-position: 95% 30%;
demo
Related
I want to change my div background color and image on hover. Just like this.
I tried with this way. But it changed only background color. Is there any way to achieve this kind of situation?
<div class="col-md-4">
<div class="icon-wrapper"></div>
<p>Products</p>
</div>
.icon-wrapper {
background: url("/assets/human-resources.png");
display: inline-block;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #ddd;
height: 120px;
position: relative;
width: 120px;
border-radius: 50%;
transition: all 0.2s;
img {
top: 22%;
left: 24%;
position: absolute;
}
&:hover {
background: blue;
background-position: center;
background-repeat: no-repeat;
background: url("/assets/car-white.png");
}
}
background-color: #6DB3F2;
background-image: url('images/checked.png');
you could try to use this instead
background: #6DB3F2 url('images/checked.png');
I don't know all layout of your website but I can tell you a short introduction to popups - how to create them in right way.
At first, outside all other div blocks create another one for background mask (between last div block element in html and closing body tag) - it will be used only as background layer (with absolute position), style as you wish and set display none to hide it.
Then create another div block for popup (not inside background block but under it, position fixed to scroll with your page), create popup and style how you want, hide it as well (display none).
This will give you reusable popup structure that you will be able to use how many times you need afterwards just adding new popup block under first one etc.
I know it is just a theory without real life examples, so you can study a bit here (about structure, jQuery can be used in more easy way):
Reusable modal popups
P.S. Answer to your question:
You need to change background-color and background-image (on hover state). :)
In my understanding you are trying to change the background image and the background color on hover, right?
Try this:
yourElement:hover{
background-color: yellow;
background-image: url(../images/bg.gif);
}
Example 1 : Table row background color change
<table>
<tr bgcolor="#777777">
<td>Content Write here...</td>
</tr>
</table>
Example 2 : If change background image then use this code
<div style="background-image: url('bg.jpg');"></div>
Because you are overriding background on hover selector thats normal situation. Try background-color:blue; on hover selector
I have a label that has a background image and some text. I need to position the text 10px right of the background image, such that the background image is clearly visible.
I need to do this without adding additional HTML elements or Javascript.
Here's the source code I have so far:
label {
background-image: url('http://missouri.municipalbonds.com/img/icons/add.png');
background-repeat: no-repeat;
background-position: left top;
}
<label>This is my label</label>
Any ideas on which CSS property I am missing to achieve this?
Image is 16px wide, 10px to the right of it is a total of 26px.
Use padding or padding-left for the desired effect.
http://jsfiddle.net/L0ctetdg/
label{
background-image: url('http://missouri.municipalbonds.com/img/icons/add.png');
background-repeat: no-repeat;
background-position: left top;
padding-left: 26px;
}
<label>This is my label</label>
It must also be said that this is seriously basic stuff. Before you come running to StackOverflow on the first problem you encounter, try treating the language with a little respect by studying it properly.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
http://hashcss.com/schools/
Untested but padding-left: 10px; should do it
There is white space appearing around the background image.
The code is as follow:
.class-of-div{
background: #00b5ff url(../img/cart.png) no-repeat;
background-position: 34px 4px;
}
This happens in all browsers
If you had kept a class to an image, than try this code:
.class-of-div {
background: #00b5ff url(../img/cart.png) no-repeat;
background-position: 34px 4px;
margin: -8px 0 0 -6px;
}
or simply use the below code:
body {
margin: 0px;
}
It's very simple than above.
Don't use photoshop's "save for web" - use "save as" instead. :)
Going by no imagery, set the width of the background image to 100%;
background-size:100%;
add this to your css
*{padding:0px;
margin:0px;}
html, body {
margin: 0;
padding: 0;
}
Try to set display: inline-block; or display: block; to your image. If you can use css3, use background-size: cover; You can use background-position: top left; or likewise.
As per my understanding of the problem, I created a fiddle to solve your problem. Please find the fiddle here
I added a border around the div and set a height so that it is clear that there is no white space around the image.
.class-of-div{
background: #00b5ff url('http://instafynd.com/problem.PNG') no-repeat 34px 4px;
height: 200px;
border:1px solid #f00;
}
Let me know if it solves your problem.
Problem in image. Download or create other. Is not CSS problem.
Thank you for your answers. It was a graphic issue, photoshop "save for web" was actually creating that space (don't know why). But once I saved the file from "Save as". It's working fine.
It's the save for web option on photoshop and similar apps that causes this. I had the same problem using Adobe Illustrator Draw on the iPad. If the application you used for making the image doesn't have a "save as" option rather than "export for web" try using something like "preview" (mac) or paint on windows to crop it down.
Sorry for uping this topic, but in 2020 if you put this in html:
<img class="class_nbr_1">
and in your CSS:
.class_br_1 {
background-image: url("../img/icons/image.png");
background-color: transparent;
position: relative;
You'll have a white border, undisplayable. So juste use <p> instead of <img>
the simplest way to solve the problem is to add the following css rule the class.
overflow: hidden;
I have the folowing HTML:
Wardrobe
Wine
Coffee
This is the relevant CSS:
.home-block {
background-color: #c2b89c; display: block; height: 180px; line-height:180px;
text-align: center; font-size: 70px; color:#e2e2e2;
text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
background-position: center center; box-shadow: 1px 1px 4px #111;
}
My result now looks something like this:
That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:
Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using background-size: cover. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.
So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.
What I have tried is this:
.home-block { background: none; }
.home-block:hover { background: inherit }
but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.
It's a little bit tricky if you need to have background-image set inline in HTML. You can't overwrite it easily. What I would try to do is to change background-position on hover:
.home-block {
...
background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
background-position: center center !important; // make it visible
}
http://jsfiddle.net/h2Jbg/
So for normal state you will not see background image but will see backgroud color. On hover you move image back.
Unfortunately it's not possible to use the :hover pseudo-class inline, which makes it hard to accomplish this inline on a single element.
It is often a bit ugly to use an additional element for the purpose of styling, but at least it is a possible solution to the problem at hand.
<div style="background-image: url(http://lorempixel.com/400/200);">
<div class="home-block">Foo</div>
</div>
You could then use something like this in your CSS:
.home-block:hover {
background: transparent;
}
Demo
This way, you will be able to add new blocks with individual background-images, without updating the stylesheet.
I have an image that looks like this:
Is it possible to extend this image (perhaps inside a div) so that it would look something like this:
Thanks!
You can create a div of the same color using the CSS background-color property (I believe the hex should be ~#999). Then, position the image as a background-image within the div using the background-position: right property.
HTML
<div class="arrow">Home</div>
CSS
#arrow {
background-color: #999;
background-image: url('http://i.stack.imgur.com/QDCz4.png');
background-position: right;
background-repeat: no-repeat;
/* sets div dimensions/text styles */
height: 24px;
color: white;
text-align: center;
line-height: 24px;
float: left;
padding-left: 20px;
padding-right: 30px; /* slightly longer to account for background image /*
}
JS Fiddle: http://jsfiddle.net/fbBsz/14/
Get a vertical slice of the gray part of very top left of the arrow with having width:1px. Take that one px slice image and repeat it on -x.
Here is something you can practice with
Since your image does not have a gradient, you have a better chance of matching the color(s) you want with just using background color.
you can set it as a background to a div
#elem {
display:block;
width:200px;
height:20x;
background: url(/filepath/to/image.gif) right top no-repeat #ccc;
}
Just make sure the background color is the same as the dark grey on the gif
No, this is not possible in CSS. You must set the width of the containing element, set the background image's url and set the x-position to right and set the repeat to no-repeat. Then set the background color to the same as the button's foreground color. If the button foreground is a pattern, you will have to use another image as the background.
No, not with that image at least :-)
Looks like you could make use the "sliding doors" technique – see http://www.alistapart.com/articles/slidingdoors/ for a good article about it