hyperlink background image CSS

Question

Hello I want to add hyperlink to custom background image, so when the image is clicked, it is directed to another page. The script I'm using.

body.custom-background {
background-attachment: fixed;
background-image: url("https://remehtemehmedia.files.wordpress.com/2014/12/women6.jpg");
background-position: left bottom;
background-repeat: no-repeat;
}

The page I'm going to direct the link to: http://remehtemeh.com/2014/12/05/menyambut-doraemon-stand-by-me/

How to create HTML text using widget and target to custom background? The text widget has to be placed in the widget area and that's not exactly what I want.

Can you solve this problem for me?

Thanks in advance

The blog I need help with is remehtemeh.com.

I don't think that you can put hyperlink in css. Better, wrap the image with anchor tag and give url in it's href. — Narayan Subedi, Dec 05 '14 at 08:36
could you please clarify/explain the line *How to create HTML text using widget and target to custom background? The text widget has to be placed in the widget area and that's not exactly what I want.* for me? — jbutler483, Dec 05 '14 at 09:16
@jbutler483: here is the screen capture for illustration http://snag.gy/O6lJr.jpg. The blocked area is called widget area. And the image of Doraemon at the bottom right of the page is the image I want to hyperlinked. I don't want to put the image in the widget area. Is it possible to do so? — Imanuel Kristianto, Dec 05 '14 at 09:29
could you post the relevant markup/css you've used (preferably in a codepen or jsfiddle)? — jbutler483, Dec 05 '14 at 09:32
@EmreAcar I mean to say that clickable hyperlink... How can we do that ? Will you please tell us ? — Narayan Subedi, Dec 05 '14 at 09:36

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

by wrapping it in anchor tag, you can then add functionality (css is meant for only visual/display styles, not usability). It should be your html that handles your links use/etc

<a href="http://home.com" id="logo">Your logo name</a>

you can then style it with css:

#logo {
  background-image: url(images/logo.png);
  display: block;
  margin: 0 auto;
  text-indent: -9999px;
  width: 981px;
  height: 180px;
}

Alternative

You could also create an anchor tag, and have the image within it:

<a href="myLinkToPage"> <img src="myImgUrlSource" alt="" /></a>

You control design and styles with CSS, not the behavior of your content.

You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

You cannot nest a div inside and still have 'valid' code. is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the element.

You can nest your <a> tag inside <div> and then put your image inside :)

~SOURCE

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 05 '14 at 09:16

jbutler483

24,074
9
92
145

where do I have to put this script: Your logo name? In wordpress there's a tool to insert HTML script via text widget. But I dont want to put the image in the widget area. – Imanuel Kristianto Dec 05 '14 at 09:30
Place it within your markup where ever you want (it's not a script it's just an element - much like a div/p/table tag) – jbutler483 Dec 05 '14 at 09:36
Yep, too bad I don't know how to insert it because the wordpress I use is wordpress.com not wordpress.org. So the source code is not open source. The customization that left open is only CSS. Can you tell me in a step-by-step explanation? I'm a bit new for this matter. : ) Thank you. – Imanuel Kristianto Dec 05 '14 at 10:00
@imanuel, the solution given by jbutler is true, we can't give the hyperlink for the image with only using css – charan kumar Dec 05 '14 at 10:14

hyperlink background image CSS

1 Answers1

Alternative