3

I just read over:

http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

He states that I shouldn't use <h1> for my logo... That I should use <img>.

But how do you make the image not draggable using <img>? His site seems to use <img> to place the logo image, but it also isn't draggable..

Arian Faurtosh
  • 17,987
  • 21
  • 77
  • 115
  • 3
    Are you worried about someone using drag and drop to steal your images? Because if so, you should realize that you can't actually stop anyone from "stealing" an image you've already served to them. – Wooble Sep 05 '13 at 18:49
  • I question the validity of that article. Using `

    ` in your logo or the general title of the site has to do with accessibility.

     – Cfreak Sep 05 '13 at 18:51
  • @Wooble That is not my concern... I like the esthetics of non-drag images. – Arian Faurtosh Sep 05 '13 at 18:52
  • I'm on firefox and I can drag it. – Itay Sep 05 '13 at 18:53
  • Whether or not a logo is a content image or decorative image is debatable (it should be noted that `

    Coca Cola

    ` is perfectly valid). My opinion is that if the image contents will *never* change when you redesign, then it is a content image and should be embedded via ``. Otherwise it is decorative and belongs in the CSS. "I like that I can't drag it" is not a good reason to choose one technique over the other.     – cimmanon Sep 05 '13 at 19:25

3 Answers3

8

Set the CSS property of the image as:-

user-drag: none; -moz-user-select: none; -webkit-user-drag: none;
Rahul Tripathi
  • 168,305
  • 31
  • 280
  • 331
2

You use a 1×1 transparent GIF for the <img> tag and then use CSS to set it's size and background image. If someone drags the image, they are dragging the transparent GIF and not the visible logo. In his page, the source looks like:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="CSS Wizardry" class="s  s--csswizardry-logo">

where "s s--csswizardry-logo" are:

background-image: url(/img/css/sprites/main.svg);
-webkit-background-size: 500px 500px;
-moz-background-size: 500px 500px;
-ms-background-size: 500px 500px;
-o-background-size: 500px 500px;
background-size: 500px 500px;
width: 128px;
height: 128px;
background-position: -10px -10px;
DocMax
  • 12,094
  • 7
  • 44
  • 44
  • 1
    That's pretty interesting.. in the article he states 'stop applying logos as backgrounds' yet essentially does exactly that.. I know there is a still an `` element, but still.. – Josh Crozier Sep 05 '13 at 18:58
  • I hadn't noticed that in the page. I love the irony there. – DocMax Sep 05 '13 at 18:59
  • 1
    That is quite funny, I just saw the and assumed he was using that to display the image. His method is another rendition of css background. This is flawed because when you try to print his page, the logo hidden because is considered background and not content. – Arian Faurtosh Sep 05 '13 at 19:10
0

Just simply use this code:

<img href="img.png" draggable="false" />

If you are looking that way it isn't selectable, use this code in CSS:

user-drag: none;
user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Source of CSS: Preventing an image from being draggable or selectable without using JS

Community
  • 1
  • 1
Limbo Gene
  • 19
  • 4