Clickable background

How do I add a hyperlink to a background image?

I’d like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).

5 Answers 5

You’re using a background-image on the body tag. Assigning a hyperlink to it is impossible.

Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:

But, if you must use it as a background image, than creating an additional class is the way to go.

You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can’t hyperlink a background image.

You’d have to do something like:

Also, add cursor: pointer to the css for the background div so people know it’s a link.

Thanks very much! But now there’s that white space on the top bottom and the page menu itself. thehypebr.com

Don’t do «onclick=»window.location.href=»http://boundlessny.com/clothing»» — do «onclick=’window.location.href=»http://boundlessny.com/clothing'» — i.e. nest single quotes inside double quotes.

OK, I can’t tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream «Boundless» boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it’s doable.

1. Make clear gif’s the same size as your cream boxes
2. Put those images in something like this
3. Use CSS to make the a tag a block element and place it over the cream boxes in the background image

I would of course clean up my code, it’s a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.

This isn’t the best solution, that would be to take the «boundless» boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.

Источник

Add URL link in CSS Background Image?

How can I add the link to the the background image in that CSS? The full CSS can be found here and the html that uses is there.

You want to link to the background-image in your css file, or you want to display the link to the image in the rendered web page?

@ricebowl: at the end I want the web page picture to have the link. But the package only insert the picture via CSS.

3 Answers 3

Try wrapping the spans in an anchor tag and apply the background image to that.

Using only CSS it is not possible at all to add links 🙂 It is not possible to link a background-image, nor a part of it, using HTML/CSS. However, it can be staged using this method:

 .wrapWithBackgroundImage < background-image: url(. ); >.invisibleLink

This will not work properly, by making the invisibleLink absolute it will be pulled out of the document flow and the div will collapse.

It does work wonderfully. However, the solution might have to be adjusted to fit the specific needs of this specific case.

@Simeon: I’ve tested it in Firefox. It seems to work only if there is enough content to fill the 55px vertical space. I agree that any tailoring would be needed.

I understand what you mean. Adding overflow: visible; might fix that problem. And I also understand if you don’t think this is a complete answer, I could have had a look at the links that was provided. However, this methodology is a way to solve the problem, and if he needs a more specific example, someone or me might find time to provide that.

display block and position absolute are key in here. And for the height and width you should use 100%

Источник

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   

Источник

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).

Источник