Clickable background

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

Источник

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.

Источник

HTML Background Images

A background image can be specified for almost any HTML element.

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

Example

Add a background image on a HTML element:

You can also specify the background image in the element, in the section:

Example

Specify the background image in the element:

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on the element:

Example

Add a background image for the entire page:

Background Repeat

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

Example

To avoid the background image from repeating itself, set the background-repeat property to no-repeat .

Example

Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

Example

Background Stretch

If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100% :

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

Example

Learn More CSS

From the examples above you have learned that background images can be styled by using the CSS background properties.

To learn more about CSS background properties, study our CSS Background Tutorial.

Источник