Specifying <img> src with CSS

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Does anybody know if it is possible to specify an <img> tags src using CSS?

Or if my site's SEO or browser support will take a hit by getting rid of my img tags in favor of div tags with a background-image & a width/height specified?

Edit: sorry if this post belongs in design, wasn't paying attention.
  • dark_lord
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: India-Kolkata

Post 3+ Months Ago

think of table background using height and width?
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

dark_lord wrote:
think of table background using height and width?


A table to display an image? LOL
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

What type of images, as in how are they used ?

If this is for say, a photo galleries thumbnails, don't. It would remove the semantic meaning of the elements and at the very least reduce traffic from image search engines.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

They are 16 X 16 icons, mixed png & gif, less than 1KB each. They are just little icons on my site, usually there is no anchor tag around them either. Now that I think about it, I don't really want a search engine to care about them.

What I'm trying to do is display an image using the data URI scheme (base64) to reduce my HTTP requests, but keeping the base64 within the CSS file and not in the image tag and I have it working fine with a div. However since it's not supported in some browsers, I'm trying to specify the background-image of the div using the URL brackets, but for some reason this is not working.

Code: [ Select ]
 
.header_icon {border: none; margin: 0px 3px 1px 3px; vertical-align: bottom; }
<?php
if($FireFox)
{
?>
div.icon_wrench { width: 16px; height: 16px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH0SURBVDjLlZPLbxJRGMX5X/xbjBpjjCtXLl2L0YWkaZrhNQwdIA4FZxygC22wltYYSltG1HGGl8nopCMPX9AUKQjacdW4GNPTOywak7ZAF/eRe/M73/nOzXUAcEwaqVTKmUgkGqIoWoIgWP/fTYSTyaSTgAfdbhemaSIej+NcAgRudDod9Pt95PN5RKPR8wnwPG/Z1XVdB8dxin0WDofBsiyCwaA1UYBY/tdqtVAqlRCJRN6FQiE1k8mg2WyCpunxArFY7DKxfFir1VCtVlEoFCBJEhRFQbFYhM/na5wKzq/+4ALprzqxbFUqFWiaBnstl8tQVRWyLMPr9R643W7nCZhZ3uUS+T74jR7Y5c8wDAO5XA4MwxzalklVy+PxNCiKcp4IkbbhzR4K+h9IH02wax3MiAYCgcBfv99/4TS3xxtfepcTCPyKgGl5gCevfyJb/Q3q6Q5uMcb7s3IaTZ6lHY5f70H6YGLp7QDx9T0kSRtr5V9wLbZxw1N/fqbAHIEXsj1saQR+M8BCdg8icbJaHOJBqo3r1KfMuJdyuBZb2NT2R5a5l108JuFl1CHuJ9q4NjceHgncefSN9LoPcYskT9pYIfA9Al+Z3X4xzUdz3H74RbODWlGGeCYPcVf4jksz08HHId6k63USFK7ObuOia3rYHkdyavlR+267GwAAAABJRU5ErkJggg=='); }
<?php
}
else
{
//This is the part that doesn't work with a div.
?>
div.icon_wrench { width: 16px; height: 16px; background-image: url('images/icons/wrench.png'); }
<?php
}
?>
 
  1.  
  2. .header_icon {border: none; margin: 0px 3px 1px 3px; vertical-align: bottom; }
  3. <?php
  4. if($FireFox)
  5. {
  6. ?>
  7. div.icon_wrench { width: 16px; height: 16px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAH0SURBVDjLlZPLbxJRGMX5X/xbjBpjjCtXLl2L0YWkaZrhNQwdIA4FZxygC22wltYYSltG1HGGl8nopCMPX9AUKQjacdW4GNPTOywak7ZAF/eRe/M73/nOzXUAcEwaqVTKmUgkGqIoWoIgWP/fTYSTyaSTgAfdbhemaSIej+NcAgRudDod9Pt95PN5RKPR8wnwPG/Z1XVdB8dxin0WDofBsiyCwaA1UYBY/tdqtVAqlRCJRN6FQiE1k8mg2WyCpunxArFY7DKxfFir1VCtVlEoFCBJEhRFQbFYhM/na5wKzq/+4ALprzqxbFUqFWiaBnstl8tQVRWyLMPr9R643W7nCZhZ3uUS+T74jR7Y5c8wDAO5XA4MwxzalklVy+PxNCiKcp4IkbbhzR4K+h9IH02wax3MiAYCgcBfv99/4TS3xxtfepcTCPyKgGl5gCevfyJb/Q3q6Q5uMcb7s3IaTZ6lHY5f70H6YGLp7QDx9T0kSRtr5V9wLbZxw1N/fqbAHIEXsj1saQR+M8BCdg8icbJaHOJBqo3r1KfMuJdyuBZb2NT2R5a5l108JuFl1CHuJ9q4NjceHgncefSN9LoPcYskT9pYIfA9Al+Z3X4xzUdz3H74RbODWlGGeCYPcVf4jksz08HHId6k63USFK7ObuOia3rYHkdyavlR+267GwAAAABJRU5ErkJggg=='); }
  8. <?php
  9. }
  10. else
  11. {
  12. //This is the part that doesn't work with a div.
  13. ?>
  14. div.icon_wrench { width: 16px; height: 16px; background-image: url('images/icons/wrench.png'); }
  15. <?php
  16. }
  17. ?>
  18.  


Code: [ Select ]
 
<div class="header_icon icon_wrench"></div>
 
  1.  
  2. <div class="header_icon icon_wrench"></div>
  3.  
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Probably going to want to stay away from the data: scheme, it was barely supported by anyone when I tinkered with it, I doubt it's supported any better now.

What about CSS sprites, like are used in rollover menus ?
I've considered doing it for thumbnails in an image gallery in the past to lower http requests and ruled against it because of the SE drawback, but for 16x16 pixel icons it would be perfect.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Oops I mistyped my images file path twice in a row and thought it was the browser, nvm. It all works now. :)

It is indeed supported better now.
http://en.wikipedia.org/wiki/Data_URI_scheme

I already have it working in FireFox, IE8 & Opera, so I'm going to be using it for sure. I'm trying to find a list of what exact versions of each browser support the data scheme, but can't seem to find one.

This site I just found explains more in-depth what browsers support it: http://www.websiteoptimization.com/spee ... ne-images/

Apparently Opera only allows up to 4,100 characters in the URL, and with base64 encoding blowing up your image size 39 to 45%, you're looking to want images that are smaller than 2.8KB for opera & the data URI scheme.

I don't want to use CSS Sprites for a few reasons. One is I'll need to remember the pixel placement for every icon that I use. Another is I don't want to merge all 1,146 Icons. There's gotta be a script someone wrote that generates one though. I googled it really quick, found something that looked like it would do the trick, but eh... you know of one that takes a file archive (zip/rar) of 1,146 png/gif images (1.05MB)?
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Ugh I think you might be right. I tried to use display: inline; on the data uri images, and it hides them. I just need to find some way to sprite all 1,146 of the pics without shifting any of them wrong either, or adding extra pixels. I noticed some of the generators do that.

I fixed the issue by floating them left, but ewww...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

Could you consider making it a list type deal? Something like:
HTML Code: [ Select ]
<ul id="icons">
<li id="wrench"> </li>
<li id="bench"> </li>
<li id="stench"> </li>
<li id="and_so_on"> </li>
</ul>
[code]
and the CSS could look something like
[code=css]
.icons #wrench {
   background-image: url('wrench.png');
   display: inline;
   height: 16px;
   width: 16px;
}
.icons #bench {
   background-image: url('bench.png');
   display: inline;
   height: 16px;
   width: 16px;
}
.icons #stench {
   background-image: url('stench.png');
   display: inline;
   height: 16px;
   width: 16px;
}
.icons #and_so_on {
   background-image: url('and_so_on.png');
   display: inline;
   height: 16px;
   width: 16px;
}
 
  1. <ul id="icons">
  2. <li id="wrench"> </li>
  3. <li id="bench"> </li>
  4. <li id="stench"> </li>
  5. <li id="and_so_on"> </li>
  6. </ul>
  7. [code]
  8. and the CSS could look something like
  9. [code=css]
  10. .icons #wrench {
  11.    background-image: url('wrench.png');
  12.    display: inline;
  13.    height: 16px;
  14.    width: 16px;
  15. }
  16. .icons #bench {
  17.    background-image: url('bench.png');
  18.    display: inline;
  19.    height: 16px;
  20.    width: 16px;
  21. }
  22. .icons #stench {
  23.    background-image: url('stench.png');
  24.    display: inline;
  25.    height: 16px;
  26.    width: 16px;
  27. }
  28. .icons #and_so_on {
  29.    background-image: url('and_so_on.png');
  30.    display: inline;
  31.    height: 16px;
  32.    width: 16px;
  33. }
  34.  

That isn't tested so it isn't guaranteed to work, but I'm sure you get the idea of where I'm getting at.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Yeah I did notice that when I was looking through some tutorials on it. However most of the icons I'm using are all alone. And yeah I'm not sure if a base64 encoded image works with ANY element displayed inline for some reason.
  • dark_lord
  • Graduate
  • Graduate
  • User avatar
  • Posts: 162
  • Loc: India-Kolkata

Post 3+ Months Ago

PolishHurricane wrote:
dark_lord wrote:
think of table background using height and width?


A table to display an image? LOL


cause you were thinking of using div background instead of img :mrgreen:
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

I ended up getting my base64 converting working. But just for the hell of it, I wanted to try to use CSS sprites, the thing is I needed to find an image generator that would take my 800KB zip file of icons and merge all 1600 of them together. However a lot of those images are transparent. I found a decent generator here: http://www.ryanbreen.com:81/spritegen/

However, it messes up the transparency/look of all the images. I just want something that merges the images together, not re-write them. I can't really merge all 1600 together either by myself, it could take forever to do it, and find all the widths/heights.

Anybody have any idea what I could do?
  • Prozack
  • Born
  • Born
  • Prozack
  • Posts: 1

Post 3+ Months Ago

PolishHurricane wrote:
Does anybody know if it is possible to specify an <img> tags src using CSS?

Or if my site's SEO or browser support will take a hit by getting rid of my img tags in favor of div tags with a background-image & a width/height specified?

Edit: sorry if this post belongs in design, wasn't paying attention.


Code: [ Select ]

<script>
window.onload = function() {go();}
function go() {
document.images.asm.src="star.jpg";
setTimeout("Go()", 1000);
}
</script>

<body>
<img src="" name=asm>
</body>
  1. <script>
  2. window.onload = function() {go();}
  3. function go() {
  4. document.images.asm.src="star.jpg";
  5. setTimeout("Go()", 1000);
  6. }
  7. </script>
  8. <body>
  9. <img src="" name=asm>
  10. </body>


very simple to implement.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Yeah... That would be JavaScript, not CSS. Damn this topic is old...

*unsubscribes*

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 48 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.