I have control in a page that gets html from text file and renders that html in webpage.
Right now it has to add image somewhere and reference that image src.
I was wondering if we can render image along with other html code, is it possible?
Yes, it is. You need a Data URI scheme:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
The same can be done in CSS:
ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat; }
You can use inline SVG. See this article for mozilla and this one for IE.
You can also create images using CSS and different size characters and playing with z-indexes. Here's CSS Homer.
I've seen it done by creating a table with one cell for each pixel, setting the cell's background color to the pixel's color.
Related
Let's say we have requirement that icon image element need to present in HTML because we need to indicate icon existence for some screen readers and it's better to have them like IMG tag than I or plain DIV.
We have sprite.png and empty.png images. empty.png used for creating fake blank image (sprite image will be shown because it's background of our element).
In css we have class
.icon {
background:url('sprite.png') 0px 0px;
width:20px;
height:20px;
}
Then we use this in our HTML like this:
<img src="empty.png" class="icon" alt="Image from Sprite is Shown" />
Can we do it any other way, using our 'sprite.png' as image source with setting any mask/clip property on img with css?
Thanks in advance.
background-image does not take the 0px parameters you have after it. You may be mixing it up with background.
To show the correct portion of the sprite image, you use background-position to select the correct portion of the image.
Here is a simple tutorial page: http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
I have an image not changing on hover and I can't figure out why.
<img src="images/image.png" alt="image" class="portImage2">
This is displaying the image with no issues.
In my css I have
.portImage2:hover{
background-image: url(http://placekitten.com/g/263/167);
}
and the image never changes on hover. Can anyone tell me why?
The background image and the image are not the same image.
When you change the background image, you just change what is behind the image.
If, and only if, the image is translucent you can see the change.
.portImage2:hover{
background-image: url(http://placekitten.com/g/263/167);
}
<img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2">
If you want to change the image itself, then you need to change that (the content) and not the background.
.portImage2:hover{
content: url(http://placekitten.com/g/263/167);
}
<img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2">
You can't replace image inserted as IMG tag with CSS background property. Browser won't allow you to do that.
Either set the initial background on A element and change it using :hover pseudoclass, or use javascript to attach onMouseOver event and update src attribute dynamically.
Both ways are still bot perfect (or my description is too simplified) but this problem is very basic and it is described in almost every tutorial/introduction to HTML & CSS.
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html
I'm working on a web application and I'm using the img tag (<img...>).
When the src property is empty, it shows the red x figure indicating that there is no image.
Is there any way to hide that red X icon?
An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.
If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:
<img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
<img style="display: none"/> which removes the image from the page, making it take up no layout space
The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.
There's no need adding img tags if you set src to empty string.
If you don't want to print the image, but show it on the screen you can use CSS media types:
<style>
#media print
{
img.noprint {visibility: hidden}
}
</style>
and then add a class to all the images you do not want printed
<img class="noprint" .../>