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

Apache server is failing to perform HTML encoding

Currently working on a PHP code where a method is returning text to display an image. Here is the snippet of the code: $ret = "<div align=\"center\">" . "<image src=\"" . "${webserviceDir}Graph.php?usr_id=" . urlencode($usr_ ...

phphtmlapache

Does the Apps Script parser JSON.parse() incorrectly remove leading zeros from string object keys?

I am facing an issue with my Apps Script Web App where JSON data is being manipulated when I try to parse it. Specifically, keys with leading zeros are being altered (e.g "0123" becomes "123") during the JSON.parse() function call. It seems like the functi ...

javascriptjsongoogle-apps-script

Retrieving data from Firebase query and displaying as an array of results

Currently utilizing the @react-native-firebase wrapper for interaction with Firebase's Firestore. Within my function, some querying to a specific collection is performed, with the expected result being an Array object containing each located document. ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

A comprehensive guide on implementing form array validations in Angular 8

I am currently using the formArray feature to dynamically display data in a table, which is working perfectly. However, I am facing difficulty in applying the required field validation for this table. My goal is to validate the table so that no null entry ...

htmlangular

Patience is key when using JavaScript

I have a JavaScript function that is responsible for updating my data. When the user clicks multiple times, I need to wait for the second click until the first one has finished processing, and so on. $scope.isLastUpdateFinished = true; $ ...

javascriptjqueryangularjs

What will occur if I invoke response.end in Node.js while asynchronous I/O operations and callbacks are still executing?

When working with Node.js, what happens if you call "response.end()" while I/O calls and/or callbacks are still being executed? Take a look at the code snippet below: var app = http.createServer(function(request, response) { response.writeHead(200, { ...

javascriptnode.js

Is dynamic data supported by Next.js SSG?

I'm currently developing a web application with Next.js and I need clarification on how Static generated sites work. My project is a blog that necessitates a unique path for each blog entry in the database. If I were to statically generate my web appl ...

javascriptreactjsnext.js

Picking an element that has a dynamic data attribute, but also considering those with a hyphen

Currently, I am developing a function that will select a span element when clicked based on its data attribute and value. Here is the code snippet: function moveFilterElements(event) { if ($(event).hasClass('active')) { var dataAtt ...

javascriptjqueryjquery-selectors

The JavaScript code is failing to retrieve the longitude and latitude of the location on a mobile browser

I am having an issue with my Javascript code not properly retrieving the longitude and latitude from the mobile Chrome browser. While this code works fine on laptop or desktop browsers, it seems to be failing on mobile devices: <script> if (nav ...

javascriptphphtmlmobilelocation

The CSS styles are not recognized by the Windows 2003 server

After deploying my webapp, which was created using asp.net, to a testing server (Windows 2003 SP2, IIS6), I encountered an issue. When I accessed the default page, none of the CSS styles were applied. Only plain text or formatting from the .aspx file was v ...

c#asp.netcss

Using jquery to toggle the visibility of input fields

I'm encountering an issue with this straightforward code snippet: $("#additional-room").hide(); var numAdd = 0; $("#add-room").click(function(e) { e.preventDefault(); $("#additional-room").show(""); if (numAdd >= 3) return; numAd ...

javascriptjquery

retrieving identifiers from a separate table for an array of values

As a newcomer to node and noSQL databases, I am facing challenges in grasping the concept of passing an array of IDs and retrieving the corresponding values from another table. I have 'users' and 'products' tables in my database. The st ...

javascriptnode.jsmongodbexpressmongoose

Using the combination of z-index and visibility:hidden makes the button go completely undetect

Can someone please review this code? .parent { visibility: hidden; position: relative; z-index: 1; } .child { visibility: visible; } <button class="parent"> <span class="child">content</span> </button> I' ...

cssbuttonfirefoxz-index

Is the JSON parsing issue being caused by Bodyparser?

I am encountering an issue with parsing JSON on my server using the body-parser NPM module and Express. The JSON data is not appearing correctly on the server for some reason. Here is a snippet of my server code: ... app.use(bodyParser.json()); app.use(bo ...

javascriptajaxnode.jsexpress

In Javascript, assign default values to an array and update them with new values upon the click of a

My goal is to create a quiz that populates an array. Initially, the quiz is empty but I aim to assign it a default value. This serves as my question navigation: /** * * @param {int} question * @returns {QuizPart} ...

javascriptarraysif-statementvariables

Rendering in React by cycling through an array and displaying the content

I have been working on displaying two arrays. Whenever the button is clicked, a new user is generated and added to the array. My goal is to render the entire array instead of just the newest entries. I've attempted various methods but haven't had ...

javascriptarraysreactjsrender

V-model prevents checkbox from being checked upon clicking

codesandbox: https://codesandbox.io/s/github/Tapialj/AimJavaUnit6?file=/src/frontend/src/components/AddMovieForm.vue I am currently working on implementing a feature where I need to collect an array of selected actors using checkboxes. I have set up a v-m ...

javascripthtmlvue.jsv-model

Is it possible to alter the parent scope from an AngularJS directive?

I am currently in the process of constructing my initial Angular application, but I am encountering some difficulties while attempting to achieve a specific functionality. The issue revolves around a video container which is supposed to remain hidden until ...

javascriptangularjs

What could be causing my JavaScript function to produce repeated letters with just one key press?

After implementing a code that generates different variables based on the 'truth' variable, I encountered an issue. Everything works flawlessly when 'truth' is set to "name," but as soon as I switch it to "email," any keystroke results ...

javascript

When adding classes using Angular's ng-class, CSS3 transitions are not activated

After creating a custom modal directive in Angular, I am encountering an issue with the transition animation not working as expected. Within my directive's isolated scope, there is a method called toggleModal() that toggles the modalState between true ...

angularjscss