Divide a SINGLE BACKGROUND IMAGE in HTML into two separate links of equal size, one at the top and

As a beginner in HTML, I am trying to find a way to divide a background image into two equal sections without using image mapping. I attempted to split the links by setting the style to 0% and 50% to designate the top and bottom halves, but unfortunately, it did not separate the image as intended.

Here is the code that I currently 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>

I would greatly appreciate any assistance on this matter. Thank you!

javascripthtmlcsshtml5-canvas

Answer №1

Utilize the img tag as a background-image through css, and then align the links over a container with the specified 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>

Answer №2

Here is an example of a basic layout:

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

In this code snippet, I have used a div element as a wrapper with a specific background color for the links inside it. Instead of specifying borders for the a tags, you can use 

background-image:url(imageAdress);
for styling.

Answer №3

I've developed a solution that addresses your needs with some limitations to consider:

  • You'll have to specify the height of the image in pixels and code the top half to be exactly half of that amount. Using % may result in the top link appearing larger than the bottom one due to my limited exploration on finding a workaround.
  • The image is loaded twice, which could be a concern if your images are large in size.

* {
  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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

htmljquery-uicssjquery-mobile

OpenLayers: real-time data display of objects from a list

When working with OpenLayers, I encountered an issue where my object was undefined and I couldn't retrieve the information I needed to display feature data on the map. Initially, I passed a list from the controller to my JSP file and attempted to use ...

javajavascriptopenlayers

Strategies for bypassing Jquery form validation within a single form element

I want to implement form validation for all form elements, but I need to exempt one if a specific checkbox is checked. HTML <form id="reg_form"> <div class="control-group"> <div class="control"& ...

javascriptjqueryjquery-validate

Is there a way to alter the format of a URL?

I'm utilizing the ytdl-core library to access a URL for audio content. The provided URL is: https://r2---sn-gwpa-w5py.googlevideo.com/videoplayback?expire=1612552132&ei=ZEMdYNnJDumPz7sPyrSLmAw&ip=49.36.246.217&id=o-AFQLS1cSUJ6_bXBjMOIiWk1N ...

javascriptnode.jsreact-nativeytdl

Discover the exclusive Error 404 dynamic routes available only in the production version of NEXT13! Don

Hey everyone, I'm encountering an issue with NEXT's dynamic routing (Next 13). My folder structure looks like this: - user/ -- [id]/ --- page.js It works fine in dev mode but not in production. What am I trying to do? I've created a "page ...

javascriptreactjsnext.js

"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel

I have developed a sample that functions just as I envision my final outcome to function, with the exception of triggering on mouse-over. Instead, I would like it to activate as a page transition when scrolling with the mouse. (move your cursor over the i ...

javascripthtmlcssmaskclipping

Configuring Access-Control-Allow-Origin does not function properly in AJAX/Node.js interactions

I'm constantly encountering the same issue repeatedly: XMLHttpRequest cannot load http://localhost:3000/form. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefor ...

javascriptajaxnode.js

What is the best way to retrieve AJAX responses from JSON data that contains multiple sets of information

["12-Feb-2017","06-Feb-2017","5","45","40","Neha shishodia","USD","unit2","phase1","Change Request","Client Approval Awaited"]["07-Feb-2017","04-Feb-2017","6","54","48","Neha shishodia","USD","unit2","phase1","Change Request","Manager Approval Awaited"] T ...

javascriptphpjqueryajax

Locate the initial ancestor element, excluding the parent element that comes before the root ancestor

My HTML structure is as follows: <div> <ul> <li> <div>Other elements</div> <div> <ul> <li class='base-parent parent'> <div>Base Parent ...

javascriptjquery

In JavaScript, the function is unable to access elements within an iteration of ng-repeat

I am using ng-repeat to display datepickers that are powered by flatpickr. To make this work, a script needs to be added on the page for each input element like so: <script> $('[name="DOB"]').flatpickr({ enableTime: false, dateForm ...

javascriptangularjsfunction

Managed the double-click event to select Snap.svg text

I am currently utilizing the snapsvg library for a project where I am implementing the dblclick event to trigger a browser window alert. However, when clicking on the svg canvas, not only does the alert pop up but some text on the canvas also gets selected ...

javascripthtmlevent-handlingdom-eventssnap.svg

Revamping the ejs template using an AJAX call

In my web app, users can search for recipes based on specific ingredients using the Edamam API. I implemented pagination to allow users to load more recipes when they click the "Load more" button, as Edamam only returns 20 recipes at a time. Here's ho ...

javascriptnode.jsajaxejsedamam-api

Adjust the display from none to block when the parent element is set to flex

JSFiddle Demo Issue with - .popupcard_first:hover .popupcard_first { display: block; } I am trying to link the :hover effect to the first card only, but the only way I could make it work is by changing .popupcard... to .featured_cards:hover .po ...

htmlcssflexbox

The JavaScript code is producing a numerical output instead of the intended array

I am facing an issue with my program that is designed to eliminate items from a list of arguments. function destroyer(arr) { var args = [].slice.call(arr); var data = args.shift(); for(var i = 0; i < args.length; i++){ var j = 0; while(j ...

javascriptalgorithm

How can I extract the return value of a JSON object and store it in a variable?

I am attempting to develop a dynamic chart by utilizing data retrieved from a function housed inside a JSON object. The JSON object is fetched through the Relayr Javascript API, and looks like this: relayr.devices().getDeviceData({ token: tok ...

javascriptjsonreturnreturn-value

By leveraging the require module, programmatically load the content of a JSON file in Node.js and Mocha by passing

Utilizing mocha, node js, and the cypress tool for writing test scripts has been successful in loading data from a json file with the following statement: var data = require('../../fixtures/TestData/JsonData/ABC_DEF.json'); However, attempting ...

javascriptnode.js

When you use Array.push, it creates a copy that duplicates all nested elements,

Situation Currently, I am developing a web application using Typescript/Angular2 RC1. In my project, I have two classes - Class1 and Class2. Class1 is an Angular2 service with a variable myVar = [obj1, obj2, obj3]. On the other hand, Class2 is an Angular2 ...

javascripttypescriptangular

Issue with incremental static generation in version 13 not functioning as expected

Is ISR working for anyone in the NextJS 13 Beta version? I have set revalidate to 15 as follows. export const revalidate = 15; However, even after running `npm run build`, the page still remains a statically generated site (SSG). The symbol is showing u ...

javascriptnext.jsnext.js13

Navigate to a refreshed version of the page with varying parameters using React Navigation

Currently, I am utilizing React Navigation for navigating between different pages within my app. One of the pages is the Profile page which displays a user info card along with their posts. Within this Profile component, I have integrated the Post componen ...

javascriptreactjsreact-nativereact-navigation

Ensure that all items retrieved from the mongoDB query have been fully processed before proceeding further

In the midst of a challenging project that involves processing numerous mongoDB queries to display data, I encountered an issue where not all data was showing immediately upon page load when dealing with large datasets. To temporarily resolve this, I imple ...

javascriptnode.jsmongodbloopssettimeout