I have this image which I want to use over div of ANY color to give a glossy look. What should I do? should I use it as a background or add it on other div and put it on previous one?
Thanks
.your_div {
background: #f39 url(http://i50.tinypic.com/2m2b9td.png) no-repeat left bottom;
}
Related
I have this image and I want to make it white by default and cyan by hover. Is there another way than to make 2 images, one white and one cyan?
You can make a PNG where the magnifying glass is transparent, then set the background color on the img tag in CSS:
img {
background: steelblue;
}
img:hover {
background: skyblue;
}
Demo: http://jsbin.com/jeqihuxo/2/edit
Another way is to use sprites. Well, technically would not be two seperate images but one image which background-position is changed on hover. Your image is 36x48, so make a new image 72x48 with the non-hover version on the left side and the hover version on the right and move the background on hover.
I have some divs, and they have their backgrounds set as images using this:
background:url(myimage.jpg);
Now what I'm looking to do is set a border on that image that is set to the background.
I don't want to set a border on the div as this does not give the desired result, it must be a border on the image.
Not sure if this is possible, is it?
You could try using multiple backgrounds, by setting your base bg image and a second one as a border.
#container {
background-image: url(Main-bg), url(Border-img.png);
background-position: center center, left bottom; /* border bottom in this case */
background-repeat: no-repeat;
}
It is not possible to do it precisely as you've mentioned. Since the background image is styling, rather than content, no additional styling can be added to it.
The best option would be to create a different image file to serve the bolder border.
In application I have a few columns that can contain inline-editable values. For these cells, I want to display a pencil icon:
td.editable
{
padding-right: 20px;
background-image: url(pencil.png);
background-repeat: no-repeat;
background-position: center right;
}
This CSS is almost fine except... I would like to have a 2px space between cells border and image. Is is possible to achieve it with background image and CSS? If not, how can I achieve it?
Thanks
Just re-save your BG image with a 2px transparent border and make the inputs 4px taller to accomodate the new height.
Use the background-position property with x% y%.
http://www.w3schools.com/cssref/pr_background-position.asp
Try this:
table { border-spacing: 2px;}
The simplest way? Add 2 pixels to the right of your pencil.png. You could screw around with background position but not worth the effort.
How do you align an image or background image to the bottom right of this fluid hero box example in twitter bootstrap?
write like this:
div{
background-position:bottom right;
}
You can use the bootstrap .pull-right class with some top margin to push an image to the bottom right, or define your background-position to the bottom right as the other posted suggested.
<img class="pull-right" style="margin-top:10px;" src="http://lorempixel.com/400/200">
You can arrange background image to left bottom by using the following CSS
div{
background-image: url('/Holding.png');
background-repeat: no-repeat;
background-position: left bottom;
}
For reference you can check here.
I have a span tag that I'm adding a background image to. I know there are many ways of doing this but wondered if there is a way to make the background image which is a small pdf icon move to the right of the text instead of the left of it.
<span class='pdf'>download pdf link</span>
.pdf{
background: url(img/sprite.png) no-repeat left bottom;
display:inline-block;
padding-top:10px;
padding-left:26px;
There are a few more sprites in the sprite image and this one is set to be position to the bottom.
How about changing left to right?
background: url(img/sprite.png) no-repeat right bottom;
padding-right:26px;
There are two ways by which you can position the background image.
by left/right attributes
For example:
background: url(img/sprite.png) no-repeat right bottom;
// "right" instead of "left"
See the Demo: http://jsfiddle.net/rathoreahsan/sDajV/5/
or
by percentage attributes
For example:
background: url(img/sprite.png) no-repeat 188% 93%;
See the Demo: http://jsfiddle.net/rathoreahsan/sDajV/4/