i'm trying to use CSS to replace the image in html, so
<img class="flechaTooltip" src="oldpath" />
turns into
.flechaTooltip {
width: 0;
height: 0;
padding: 11px 209px 0 0; /* New image's dimensions here */
background: url(../../nImg/flechaTooltipGris.gif) no-repeat;
/* Removing image from older Opera */
content: "";
display: inline-block;
}
But it doesn't seem to make any effect, any idea why??
-edit-
i have used this technique to replace text for an img, but never tried to replace img for another img
The text-indent only works on inline elements in the flow, so if you'd use it for a line with inline element (or any other inline or inline-block elements) it would work.
However, you can replace an image with another image using CSS if you know the new image's dimensions using the following CSS:
.flechaTooltip {
width: 0;
height: 0;
padding: 50px 300px 0 0; /* New image's dimensions here */
background: url(newpath);
/* Removing image from older Opera */
content: "";
display: inline-block;
}
And here is a jsfiddle for you: http://jsfiddle.net/kizu/kNAgT/4/
No, it doesn't... because an image contains no text to indent.
However, you can achieve the affect you want by wrapping the image in another element, like a p or div.
So
<p class="flechaTooltip"><img src="oldpath" /></p>
Example: http://jsfiddle.net/jasongennaro/v7GyN/
Related
Here I have create one div box using css stlye.
Fiddle: Correct view
But if the description is small then content misaligned as below:
Misaligned box
i tried changing the position and css values, but no luck.
Can some one tell me how can I keep footer part on it's position even if the content is small.
You need to clear the floats:
.footer-working-area {
clear:both; /* this sets the element flow back to normal */
background: transparent url(...) left 5px repeat-x;
/* /\ have some padding for the img */
}
Now the footer always stays below the picture, no matter how few text content you have.
Here you have the accordingly modified example fiddle.
You can give your text a min-height...
.text { min-height: 110px; }
... or a height if you don't expect longer texts
.text { height: 110px; }
... or clear the floats as Christoph mentioned in an other answer.
Add clearfix to the .text class
.text::after {
content: "";
display: block;
clear: both;
}
EXAMPLE
I'm trying to build a stylesheet that prints only a specific image, and sizes the image to cover the entire page.
In my media="print" stylesheet, I have:
#page {
margin: 0.5in;
}
body {
width: 100%;
}
body * {
visibility: hidden;
}
#specificimage {
visibility: visible;
position: fixed;
top: .5in;
left: .5in;
width: 7.5in;
height: auto;
}
The html structure is similar to this:
<body>
<div>
<div>
<div>
<img id="specificimage" src="image.png" />
</div>
</div>
</div>
</body>
It prints fine in Firefox 19, but that is the only browser I've tested that works correctly. IE 9 doesn't show anything; Safari 5.1.7 (PC) shows only a sliver of the image on the left side of the page; Chrome 25 shows the full image, but in a small portion of the page.
Anyone know of anything else I can try?
As Diodeus notes in the comments, the visibility of any given element doesn't matter if its parent is not displaying — in fact in many browsers the resource won't even be loaded.
I would propose these changes:
* {
background: none !important;
direction: ltr !important;
display: none !important;
font-size: 0 !important;
height: 0 !important;
line-height:-9999 !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
text-indent:-9999em !important;
width: 0 !important;
white-space:normal !important;
}
html, body, div, #specificimage {
display: block !important;
}
#specificimage {
left: 0 !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
}
The * rule is pretty heavy, but makes sure that:
The size (or number of pages, because of a page structure taller than one page) will not be influenced by metrics, which is influenced by border, height, margin, width;
Text immediately inside a div is not visible: negative text indent, forced direction of left to right, plus zero font-size and forced wrapping via white-space: normal mean it will be hidden out to the left and won't extend the width. a negative line-height means it will be hidden off to the top too, and won't extend the height (or number of pages) if it's extremely long.
Position: static means left, right, top or bottom won't extend the page canvas more than it needs.
The important rule is there because whatever rules giving any of these properties to your elements in the first place will always be stronger. Without making assumptions about the document structure, we have to apply this override. If you need to make this trump more specific class and selector-based rules with !important specified, you can append :nth-child(n) to the asterisk any number of times, but this won't help against inline styles or rules with ID selectors that also have importance toggled.
Is it possible to position a sprite icon as a background of an element?
I have a file, "icons.png" which contains several icons. I want to select one of those as a background of an element.
Usually I would use
.sprite {
background: url('imgs/icons.png') no-repeat 0 -21px;
width: 17px;
height: 10px;
} and use this class for a button, etc...
The problem is I have a text input and I want to modify it's placeholder
.First I did this, which works perfectly if the file I use is the icon itself
:-webkit-input-placeholder{ background: url('singleIcon.jpg') center right no-repeat; }
But now I want to use a file which contains more icons.
Is it possible to use something like this ?
:-webkit-input-placeholder{ background: url('imgs/icons.jpg') center right no-repeat; }
The problem in the last line of code is that it will select all my image (which of course contains all my icons I want to use on the website), I want to select only a part of that image ( the icon I want to use )
Actually, the sprites are used only as background (or you've to set up some kind of complicated cropping).
What you have to do is to set the size of the element to the same sprite's part that you have to show, and the position of the background equal to the x and y coordinates of the icon in the sprite, starting from the top left.
An example taken from this nice article:
"Item 2" is 116x48, begins at 12px (x coord) and 70px (y coord).
So your element's CSS should be:
.element {
width:116px;
height:48px;
background:url(sprites.png) -12px -70px no-repeat;
}
But, what if your element is taller/wider than the above dimensions? Then, you've to isolate that icon with enough transparent/white space so that the other icons won't show up.
If you look up at Facebook sprites, you'll notice that some of them are very long, some others groupped, some others isolated. You've to adapt the sprite for each situation.
Edit: ok, i got your actual needing.
It's not easy with inputs because you can't use pseudo-elements on it. Here comes a workaround.
Demo
First of all, wrap the input inside a div:
<div class="inputWrapper">
<input type="text" placeholder="placeholder text">
</div>
Then add some CSS:
div.inputWrapper {
position:relative; /* that's important */
float:left; /* or display:inline-block; */
}
div.inputWrapper:after {
background:#000 url(sprites.png) 0 -2px no-repeat; /* adjust background position */
content:" "; /* whitespace needed for the pseudo-element to be displayed */
position:absolute;
top:1px; right:2px; /* some room for the borders */
width:16px; /* icon width */
height:18px; /* icon height */
}
div.inputWrapper input {
padding-right:16px; /* so the text won't go behind the icon */
}
I know it's complicated, but the alternative is to create another http-request ... the choice is yours.
Here's a quick n dirty sample. Basically, just set the background-position attribute of the element's CSS.
<!DOCTYPE html>
<html>
<head>
<script>
var curFrame = 0;
var numFrames = 10;
var animTimer;
function advanceFrame()
{
var hero;
curFrame++;
if (curFrame >= numFrames)
curFrame = 0;
hero = document.getElementById("hero");
var posX = curFrame * -64;
curPos = posX+"px 0";
hero.style.backgroundPosition = curPos; //offsets[curFrame];
}
function myInit()
{
animTimer = setInterval(advanceFrame, 200, false);
}
</script>
<style>
#hero
{ /* image is 638x64 pixels - it has 10 sprites in it, horizontally offset */
background-image: url(http://blogs.msdn.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-53-00-metablogapi/5545.image_5F00_13D4E783.png);
display: block;
width: 64px;
height: 64px;
}
</style>
</head>
<body onload='myInit();'>
<div id='hero'></div>
</body>
</html>
It's possible, but some things to note:
The placeholder pseudo-class works inconsistently across browsers, e.g. Firefox on the entire input element, Chrome only on line-height.
The placeholder pseudo-class by default adds a opacity layer on top of the original input box.
Background-images on the placeholder pseudo-class need to be "repeated" if the cropped icon is not the first icon on the sprite image.
The default box-sizing for form elements may be different for the rest of the elements, so borders/paddings may change the calculation of the size of your background-image.
I think it's best to keep your sprite a long vertical list of icons, make your placeholder style opaque, use the border-box box model. Also, the icon height dimension should be exactly the height of the available background space. It is also a good idea to keep the background-* properties separate so what you are doing with the sprites becomes clearer and easier to read.
Assuming you have a list of 4 50x50 icons - i.e. a 50x200 image, you can do the following:
input {
box-sizing: border-box; /* keep box-sizing consistent */
width: 200px;
height: 52px; /* compensate 2px for border */
border: 1px solid black;
background-color: blue;
background-image: url('icons.png');
background-size: 50px 200px;
background-position: right 20px top 0; /* assuming you want the icon to "float" right */
background-repeat: repeat-y;
}
::-webkit-input-placeholder {
background-color: yellow;
background-image: url('icons.png');
background-size: 50px 200px;
background-position: right 20px top 50px; /* use second icon in the sprite */
background-repeat: repeat-y;
opacity: 1; /* don't show the underlying input style */
}
Also remember to apply the styles to ::-moz-placeholder and :-ms-input-placeholder
I might be stating the obvious, but have you tried:
:-webkit-input-placeholder{ background: url('imgs/icons.jpg') no-repeat 0 -21px; width: 17px; height: 10px;
}
I have an issue with two different browsers. I have attached snapshots of issues:
When I use the following css I get image1:
.support-data-text img, .support-data-text select {
float:left
}
/* this is for dropdown list */
form#saveSupport select {
height: 29px;
width: 234px;
position: absolute;
}
form#saveSupport input{float: left; width: 243px;}
/* this is for the img we are using for dropdown list */
form#saveSupport .select_game { background: url(../images/select-status.png) no-repeat;
width: 223px; position: absolute; height: 29px; line-height:29px;
padding: 0 0 0 10px; color: #333; font-size:12px; overflow: hidden;
}
and when i add margin-left: 18% to form#saveSupport .select_game Chrome shows proper alignment of dropdown list image but not the actual dropdown list whereas Firefox displace the drodown list to right side. (Image2)
Kindly help me with the solution. I would be thankful!
Thanks,
Vikram
Hi I think you set position:relative to parent element and for child element set position:relative
I think your Parent Div is this
.support-data-text{
position:relative;
}
and now set to child div absolute position and set to left right top bottom according to your design .
Some of the CSS properties acts differently in both Chrome and Firefox.To fix this I used the below solution which worked for me. Add the CSS properties which acts differently in chrome and firefox inside class(same class name which use for chrome css prop as well) which should come under #supports (-moz-appearance:meterbar). The properties which we add within #supports (-moz-appearance:meterbar) will be taken only for Firefox browser.
Example:
#supports (-moz-appearance:meterbar) {
.yourclassname {
margin-bottom: 10px;
bottom: 2px;
}
}
This question already has answers here:
Is it possible to set the equivalent of a src attribute of an img tag in CSS?
(24 answers)
Closed 7 years ago.
I need to define an <img>'s src attribute in CSS. Is there a way to specify this attribute?
just this as img tag is a content element
img {
content:url(http://example.com/image.png);
}
#divID {
background-image: url("http://imageurlhere.com");
background-repeat: no-repeat;
width: auto; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
No there isn't. You can specify a background image but that's not the same thing.
CSS is not used to define values to DOM element attributes, javascript would be more suitable for this.
No. The closest you can get is setting a background image:
<div id="myimage"></div>
#myimage {
width: 20px;
height: 20px;
background: white url(myimage.gif) no-repeat;
}
After trying these solutions I still wasn't satisfied but I found a solution in this article and it works in Chrome, Firefox, Opera, Safari, IE8+
#divId {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
They are right. IMG is a content element and CSS is about design.
But, how about when you use some content elements or properties for design purposes?
I have IMG across my web pages that must change if i change the style (the CSS).
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
1: create a 1x1 transparent gif or png.
2: Assign propery "src" of IMG to that image.
3: Define final presentation with "background-image" in the CSS style.
It works like a charm :)