HTML Split SINGLE BACKGROUND IMAGE into two equal links (top and bottom)


HTML Split SINGLE BACKGROUND IMAGE into two equal links (top and bottom)



I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.



This is what I have:


<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>

<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">

</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
<a href="link1" style="top: 0%;"></a>
<a href="link2" style="top: 50%;"></a>
</div>
</body>
</html>



Thanks in advance!





Use an image map
– miknik
Jul 1 at 1:23





<center> is a deprecated tag. Use CSS to center an element.
– ecg8
Jul 1 at 3:26




3 Answers
3



I have created something that does what you are looking for. It has the following limitations:




* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}


<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>



Just put the img as a background-image via css, then position the links on top of a container with that background-image:


img


background-image




.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}

.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}

.split-link-image a:first-child {
top: 0;
}

.split-link-image a:last-child {
bottom: 0;
}


<div class="split-link-image">
<a href="#top"></a>
<a href="#bottom"></a>
</div>



This is a simple sample:


<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>



My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.


div


background-image:url(imageAdress);


border


a






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

PySpark - SparkContext: Error initializing SparkContext File does not exist

Image
PySpark - SparkContext: Error initializing SparkContext File does not exist I have small piece code in PySpark, but I keep getting errors. I'm new to this so im not sure where to start. from pyspark import SparkContext, SparkConf conf = SparkConf().setAppName("Open json").setMaster("local[3]") sc = SparkContext(conf = conf) print("Done") I ran this in cmd with the command : spark-submit .PySparkOpen.py I then get the following error statement: C:UsersAbdullahDocumentsMaster Thesis>spark-submit .PySparkOpen.py 18/06/30 15:21:58 WARN NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-Java classes where applicable 18/06/30 15:22:01 ERROR SparkContext: Error initializing SparkContext. java.io.FileNotFoundException: File file:/C:/Users/Abdullah/Documents/Master%20Thesis/PySpark/Open.py does not exist at org.apache.hadoop.fs.RawLocalFileSystem.deprecatedGetFileStatus(RawLocalFileSystem.java:611) at...
Read more

List of Kim Possible characters

Image
From left to right: Wade (on monitor screen), Dr. James Timothy Possible, Mrs. Dr. Ann Possible, Ron, Rufus, Kim Possible, Shego, Dr. Drakken, Monkey Fist, Señor Senior Sr., Adrena Lynn, and Señor Senior Jr. This is a list of characters appearing in the animated series Kim Possible . Team Possible Kim Possible Main article: Kim Possible (character) Voiced by: Christy Carlson Romano and Dakota Fanning (Preschool Kim; Kim Possible: A Sitch In Time ) Kimberly Ann “Kim” Possible is a crime fighter and high school cheerleading captain who saves the world on a regular basis while dealing with the normal challenges of being a teenager, such as winning cheer competitions, turning in her homework on time, and maintaining a love life. Her name is a play on the word “impossible.” Kim has known Ron Stoppable, her sidekick for most missions, since preschool. She has also completed missions with Wade, Monique, her brothers, and even her mother. In season four, Kim and Ron end up developing romanti...
Read more

Python Tkinter Error, “Too Early to Create Image”

Python Tkinter Error, “Too Early to Create Image” So I have an assignment that I have to use Tkinter to create a board game. This is just one part of the program where I want to bring in the image of the board. But I keep on getting the error, "Too early to create image" and I'm not sure what I'm doing wrong. Here's my code so far: from Tkinter import * from pprint import pprint # Which variable is currently updating from variableColors import Variables VariableIndex = 0 VariableText = Variables[VariableIndex] Ids = None # Current canvas ids of the text and 4 player tokens: # Will be None if not committed VariableCoords = { } # Where store variable and coordinates im = PhotoImage(file="C:UsersKikiDesktopAssignment\") photo = can.create_image(0,0,anchor=NW, image=im) can.pack() root.mainloop() Any help would be appreciated. Thanks :) 1 Answer ...
Read more