Images with CSS - better

  • 1
  • Idea
  • Updated 8 years ago
  • Implemented
Hi everyone. You know how we put images on webpages? With the img tag? Well, I found a better way to accomplish this same thing using CSS. This is better because:

*Nobody can right click and save because it is not an image - it is a div with a background image.

*Sometimes they load better.

So, here are the instructions for putting images on a webpage with CSS!

First, drag over an HTML widget and then you can follow these steps.

Step 1. The CSS

Here is the CSS to add. Paste this into the HTML widget you have dragged over.

<style type="text/css">
#image_1 {
background-image:url('URL-of-image-here');
background-repeat:no-repeat;
background-position:center;
width:300px;
height:300px;
}
</style>

You'll need to put in the URL where it says to, and fix the width and height to what will make the picture fully visible. You can also change #image_1 to whatever you'd like, like #hello but then you need to change the id of the div in the HTML below. Remember, it Has to have # in front of the id.

Step 2. The HTML

Here is the HTML to add. Paste this into the same HTML widget as the above one is in. Make sure this goes code after the CSS code.

<div id="image_1"></div>

If you want to change the id of the div, you need to change what is wrapped in the quotes and in the CSS above. If you have any problems or comments just post them below.

I hope this is useful!
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 8 years ago

  • 1
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
how can i add a link to the image??
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Easy, you can use JavaScript or just wrap the div code in <a href="">...

Here is the a href code to use:

<a href="http://somewhere.com">&lt;div id="image_1"></div></a>

Here is the JavaScript code:

<div id="image_1" onclick="location.href='http://somewhere.com/ ' "></div>

And change http://somewhere.com/ to the URL you are linking the image to.

Happy site building,
Nathan
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Thanks for sharing this tip Nathan!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem! :) I always wondered how Yola did there images, like the logo at the top of the Yola website and all the other ones! But, I finally found out! Just use CSS! That is why I shared it with everyone after I found this. I found this about a couple weeks ago and it is an awesome trick! I hope this helps everyone that wanted to do this :)

Sincerely,
Nathan
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
it just makes
http://tellyads.cz.cc/zzzz

is it me or the code?!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
<!--
Hi, I'm sorry, the linking code got messed up and got rendered partially, here is the correct code for links:

Here is the href code:

<a href="URL"><div id="image_1"></div></a>

Here's the JavaScript code:

<div onclick="location.href='URL';" id="image_1"></div>

Remember: Change URL to the actual URL.

-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
can i have help setting up this nathan?
http://xavisys.com/css-trick-turning-...
?

alex
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yes! :) I will post the codes below
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks so much nathan =)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Here are the codes!

CSS:

<style type="text/css">

#image-1 {
background-image:url(resources/image.jpg);
display:block;
height:58px;
text-indent:-9999px;
width:200px;

}

&lt/style>

HTML:

<a href="URL" title="Image 1" id="image-1">Telly Ads</a>

You can put whatever text you want in the A tags to confuse people when they view the source. That is what lots of websites do. I never used to know how to do this. But, all it is, is a background-image and the text is indented -9999px which makes the text hidden even though it is still there so screen readers can still read it.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i will try it now =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thankyou so much nathan =)
it looks great i am going to put it on every page in a moment!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also, add another line to the CSS directly after the background-image line:

background-repeat:no-repeat;
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
done, thanks =)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, like this:

background-image:url(resources/image.jpg);
background-repeat:no-repeat;
display:block;
height:58px;
text-indent:-9999px;
width:200px;