- HTML and CSS: using background image as a clickable link
- 3 Answers 3
- Using background images with links
- The Markup ¶
- The CSS ¶
- Explanation: ¶
- The code in action ¶
- Tags
- See Also
- How to set background image for a link?
- 4 Answers 4
- HTML/CSS Making a Link a Background Image
- 2 Answers 2
- CSS Background Image – How to Add an Image URL to Your Div
- Add an Image
- Add Multiple Images
- Order Matters
- When Should You Use Background Image?
HTML and CSS: using background image as a clickable link
I’m trying to use a html and css trick to give the impression of using a background image as a clickable link following this tutorial. I can’t get to work, however, due to two issues: 1) The link is not filling the space of the background image 2) The link will not move off the screen I’m using an html code integration block for a weebly website. I’m a beginner to html and CSS.
3 Answers 3
Works for IE, Chrome, Firexof ? Opera, Safari ? works using another image for hover ?
check your html code it should be like this
Another example how to use .svg images as clickable background. Note that the text on links is hidden by css but may be shown along with clickable .svg images after the text. If you need the images displayed before the text just change ::after pseudo-element for ::before in the snippet below.
UPD: Added material design Google font icons as a clickable background example.
/* Make clickable text on links invisible. */ .clickable-background < font-size:0; >.clickable-background:hover ::after, .clickable-background ::after < content: ''; display:inline-block; width: 48px; height: 48px; /* The default clickable background image (mouse for PC) to display if no background image is defined or it is crippled or not reachable. See the `fill="rgb(255, 0, 0)"' key=value, this is the color (red) of the .svg image. The width and height are defined above, so no need to change them in the source. All the images are taken from: https://materialdesignicons.com/ */ background: url('data:image/svg+xml;utf8,'); > /* Every image need to have its own rule defined. */ .stackoverflow-icon ::after< background: url('data:image/svg+xml;utf8,'); > /* The source of images is used instead of image files for the need to change the color (and may be other svg values) on hover event. It seems a bit redundant to duplicate the whole image source just for the case, but only foreground .images can be changed in color with css `fill' property. Let us know if you discover simpler way to do it. Otherwise you need to edit .svg file before using it as a downloadable resourse which is the same what we do here. See more reasons why the source of the .svg image is better than the link to it: https://css-tricks.com/probably-dont-base64-svg/ */ .stackoverflow-icon:hover ::after < background: url('data:image/svg+xml;utf8,'); > .github-icon ::after< background: url('data:image/svg+xml;utf8,'); > .github-icon:hover ::after < background: url('data:image/svg+xml;utf8,'); > /* This rule MUST to be placed under all clickable background rules.*/ .clickable-background:hover ::after, .clickable-background ::after < background-repeat: no-repeat; background-size: contain; >/******************************************************************************* Even better solution: clickable Google font material icons expessed as ligatures. See the tag above. *******************************************************************************/ /* Make clickable text on links invisible. */ .material-icons < font-size:0; >.material-icons a < text-decoration: none; >.material-icons ::after < font-size: 48px; color: grey; /* The default clickable background image (crossed phone) to display if no background image is defined or it is crippled or not reachable. */ content: 'phonelink_erase'; >.material-icons:hover ::after < color: blue; >/* Each clickable font icon need its own rule with the name of a ligature as content property value */ .material-icons.clickable-home ::after < content: 'home'; >.material-icons.clickable-thumb_up ::after < content: 'thumb_up'; >.material-icons.clickable-android ::after < content: 'android'; >.material-icons.clickable-important_devices ::after < content: 'important_devices'; >.material-icons.clickable-import_contacts ::after < content: 'import_contacts'; >.material-icons.clickable-phonelink_setup ::after Note that links below do not lead you to the sites linked because in the code snippet the default behaviour of links is disabled by stackoverflow.com. See the browser status bar and cursor type when hover over links. For actual testing just copy the whole snippet and create your own test.html file.
Stackoverflow - sounds good, but the icon is better. Github - sounds good, but the icon is better. May be even better solution is to use clickable font symbols. Read more about this cool feature on the links below.
Material design icons Download material icons Google fonts The Era of Symbol Fonts Material icons' geometric shapes Code points reference
Using background images with links
Associating icons with links can in my opinion be a powerful design device. With a small amount of CSS it is simple to add icons into your links.
To apply an icon to links in CSS you use background-image. Although you should use icons on links sparingly icons can greatly improve the usability of a site. In this example we have a link that goes to a journal entry page. Make an icon using Illustrator, Photoshop or your favorite imaging software. Make sure that it relates well to the size of the text it appears next to. Here I’ve made a simple pencil:
The Markup ¶
In this example we have a simple link within a div
div id="example-link"> a href="#">Link to journal articlea> div>
The CSS ¶
#example-link a padding-left: 15px; background: url(/images/examples/bglinks/pencil_icon.gif) 3px 1px no-repeat; >
Explanation: ¶
Padding left — This moves the text away from the image. Depending on the width of your image you will need more or less padding
Background — This has the rules associated with the the background image
- url(/images/examples/bglinks/pencil_icon.gif) — This is the path the image you want to be your icon.
- 3px 1px — These values position the background image. The first value is the background image’s distance from the left of the a tag, the second is the distance from the top of the a tag.
- No-repeat tells the browser only to show the image once.
The code in action ¶
A simple icon applied to a link using CSS. (If you are reading this in a newsreader you won’t see the image)
Tags
Can you help make this article better? You can edit it here and send me a pull request.
See Also
- Writing good XHTML and CSS Part 2
Oct 7, 2006
The second in a series of good practices for writing XHTML and CSS looking at writing clean, maintainable code and dealing with browser hell problems. - Preparing for IE7 — Limiting CSS Hacks
Sep 28, 2006
Internet Explorer 7 is just around the corner and there have been warnings from Microsoft that existing hacks will break layouts in IE7. By limiting the use of hacks your CSS can be both backwards and forwards compliant. - Writing good XHTML and CSS Part 1
Sep 26, 2006
In two articles I’m going to outline my opinion on what you need to understand and write high quality XTHML and CSS. The articles will focus on producing code that stands up to the rigors of the web and future proofs code. The articles are aimed at coders starting out and looking to get to grips with writing professional front end code. Of course if you don’t agree with something the comments box is there for you to add your opinion. In part 1 I’m going to look at what you need to get off the ground.
How to set background image for a link?
The code below is a link which has a class through which I want to add a background image. I am not able to display background image however same code sets background color correctly so what I am missing here? I don’t want to use tag inside link because I want to change background image on hover.
4 Answers 4
See Clearly i used class and in css,me use background-image.It is not necessary to do 1 thing from only one method.there are many options to do any anything
You are showing 50px 50px Is your link 50px heigh? My guess is that you should start with 0 0 and see where the image is. Is there a lot of transparent or white space on the canvas so the actual image is not in view especially with the 50px right and top positions added also?
Add height to your link and remove the image positioning by using left top.
you are using wrong class for css use below code
Why the negative. You are incorrect! You cannot add a position using background-image: url (smiley.png) left top; will NOT work only background: url (smiley.png) left top; or use background-position. Do your homework before giving negative feedback.
Go and add positions of «left top» to the end of that line and it will not render the image 🙂 All I am saying is that your syntax cannot contain positions with using background-image, only background.
HTML/CSS Making a Link a Background Image
But this just made the background into a link to the image. I tried making the background just the link, but that didn’t work either. The only way I can display the image is as img src=»https://stackoverflow.com/questions/45866791/». Is there a way to make that image source into the background?
Most likely, the problem is that the image URL isn’t pointing to where the image actually is. Relative URLs can be tricky like that; you might want to try using the full URL of the image and see if that helps. But without a testable example, we can really only guess.
That’s the thing, I can’t give you guys the link to this :/ I can’t use images stored on my computer for this project, they are all on a type of registry. When you’re saying use the full URL, are you saying to use to webpage URL?
2 Answers 2
If you can display the image using , then there shouldn’t be anything wrong with the image itself. Your CSS also looks good to me. Indeed, it works just fine in a snippet like this:
Since you say that you’re using an inline element for your CSS, the problem can’t even be caused by relative URLs (which, in an external style sheet, would get resolved relative to the location of the style sheet rather than the location of the HTML page).
Thus, I’m forced to conclude that your problem cannot be reproduced as described, and must be caused by something that you have not described in your question. I have therefore voted to close your question, as any answers to it at this point would have to be pure guesswork.
Ps. This really should have been a comment, but one can’t include snippets in a comment. I’ve instead marked this answer as Community Wiki, so that I won’t get any rep from up/down votes to it.
CSS Background Image – How to Add an Image URL to Your Div
Amy Haddad
Say you want to put an image or two on a webpage. One way is to use the background-image CSS property.
This property applies one or more background images to an element, like a , as the documentation explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.
Add an Image
It’s easy to add an image using the background-image property. Just provide the path to the image in the url() value.
The image path can be a URL, as shown in the example below:
Or it can be a local path. Here’s an example:
Add Multiple Images
You can apply multiple images to the background-image property.
That’s a lot of code. Let’s break it down.
Separate each image url() value with a comma.
background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
Now position and enhance your images by applying additional properties.
background-repeat: no-repeat, no-repeat; background-position: right, left;
There are several sub-properties you can add to your background images, such as background-repeat and background-position , which we used in the above example. You can even add gradients to a background image.
See what it looks like when we put everything together.
Order Matters
The order that you list your images in matters because of the stacking order. That means the first image listed is nearest to the user, according to the documentation. Then, the next one, and the next, and so on.
We’ve listed two images in the code above. The first image (morocco-blue.png) will be in front of the second (oriental-tiles.png). Both images are the same size and lack opacity, so we only see the first image.
But if we move the second image (oriental-tiles.png) over to the right by 200 pixels, then you can see part of it (the rest remains hidden).
Here’s what it looks like when we put everything together.
When Should You Use Background Image?
There’s a lot to like about the background-image property. But there’s a drawback.
The image may not be accessible to all users, the documentation points out, like those who use screen readers.
That’s because you can’t add textual information to the background-image property. As a result, the image will be missed by screen readers.
Use the background-image property only when you need to add some decoration to your page. Otherwise, use the HTML element if an image has meaning or purpose, as the documentation notes.
That way, you can add text to an image element, using the alt attribute, which describes the image. The provided text will be picked up by screen readers.
Think of it this way: background-image is a CSS property, and CSS focuses on presentation or style; HTML focuses on semantics or meaning.
When it comes to images, you’ve got options. If an image is needed for decoration, then the background-image property may be a good choice for you.
I write about learning to program and the best ways to go about it (amymhaddad.com).