The background image of the LI element is displayed behind the image within the list item

So, here is the outline of my HTML structure:

<li class="block1">
     <a title="Block 1 Title" href="get/wzTZKKrI1kQ">
          <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg">
          <span>Block 1 Title</span>
     </a>
</li>

And this is the CSS code I'm using:

#home #results li{
  float: left;
  list-style: none;
  margin: 0 10px 10px 0;
  display: inline-block;
  height: 200px;
  width: 200px;
  padding: 10px;
  overflow:hidden;
  text-align: left;
}
#home #results li.block1{ 
  background: #E1D4C0 url("../imgs/bg/lp-bg.png") no-repeat top center;
  z-index: 1
}

However, I am facing an issue where the background image of #home #results li.block1 seems to be showing behind the html img/#home #results li img. Why is this happening even though I have tried adjusting the z-index?

Edit: Here is a screenshot for reference:

I was able to resolve the issue. Feel free to check out my solution in the answer below.

htmlcssimage

Answer №1

The current functionality is intentional and part of the design. The file lp-bg.png serves as the background image for the element li.block1. Within <li class="block1">, your <img> functions as an element.

Imagine <li class="block1"> as a canvas where anything you add becomes a part of that visual space.

Consider rearranging the images displayed by each element if needed.

Answer №2

In my opinion, the dominance of the first option seems to overshadow the second one. Perhaps renaming the second choice could help differentiate between them. This is the current solution that comes to mind.

Answer №3

Resolved the issue by following these steps:

HTML:

<li class="block1">
     <a title="Block 1 Title" href="get/wzTZKKrI1kQ">
        ---->> <div></div> <<----
          <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg">
          <span>Block 1 Title</span>
     </a>
</li>

CSS:

 #home #results li{
      float: left;
      width: 200px;
      height: 200px;
      padding: 10px;
      margin: 0 10px 10px 0;
      display: inline;
      text-align: left;
      position: relative;
      background: #E1D4C0;
   }
   #home #results li.block1 div{ 
      width: 226px;
      height: 238px;
      background: url("../imgs/apis/lp-bg.png") no-repeat top center;
      position: absolute;
      z-index: 10;
      left: 0px;
      top: -7px;
   }

Explanation:

To make the image clickable, I inserted an empty div inside the a tag. Then, I applied a position: relative; to the li to serve as a reference for styling li.block1 div with the specified dimensions and position properties.

The dimensions and positioning were set to ensure that the image overlays the li element seamlessly. The additional rules were necessary to maintain the desired layout.

I trust this explanation is clear enough for others to utilize in similar scenarios. Feel free to ask if you need further assistance!

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

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

javascriptcssnode.jsnpmpackage

Activate the active class on the icon when hovering over a dynamically generated span using Vue

Is it possible to activate multiple music notes when hovering over one? For example, if I hover over music note 2, both note 1 and note 2 should get active classes. And if I hover over note 3, then all three spans/icons should become active. I have succes ...

cssvue.js

Tips for inserting information into HTML components in JSP

Hey everyone, I'm diving into JSP for the first time and I'm trying to wrap my head around how to display data from an ArrayList in my HTML. Can someone help me out? I'm thinking of doing something like this: <article> <p>< ...

javahtmljsp

How to implement multiple dependent select boxes in Rails?

I'm currently working on developing a car application where each car is assigned to a specific make and model. However, not all makes have every model available. My goal is to create a series of select boxes that update dynamically based on the selec ...

jqueryhtmlruby-on-railsajaxselect

Is it possible to style the parent CSS file using a query?

Is it feasible to achieve this, or are there alternative methods to accomplish something similar? In a CSS file, we have the ability to set queries for various screen resolutions, allowing CSS rules to apply only to specific screens. @media (max-width: 76 ...

htmlcsscss-selectors

Leveraging JavaScript Functions in HTML

I am having an issue with a JavaScript file containing two similar functions that are executed through an HTML form. While the first function runs smoothly, the second function does not display correctly. It seems like I might be calling or executing the ...

javascripthtmlangularjs

"Addressing the issue of ineffective form validation for empty or whitespace inputs

I've been working on creating a form and everything seems to be going well except for the validation aspect. It doesn't highlight when intentionally left blank or filled with spaces. I have included "required" in the HTML which partially achieves ...

javascripthtml

Issues with the OnChange function not properly functioning in duplicate input fields

I've designed a form that allows for adding or deleting rows, effectively cloning input fields. One of the input fields utilizes Jquery Ajax to retrieve its value. However, upon adding an extra row by cloning the parent row to generate a child row, th ...

javascripthtmljqueryajax

The Django view function is failing to add new records to the database

Whenever I attempt to create a record in the FinTransDetail table as an admin, I encounter errors. This is preventing me from adding records successfully. Any assistance in resolving these issues would be greatly appreciated. Additionally, since I am unabl ...

pythonhtmldjangoforeign-keysadmin

Show full-screen images on click using Ionic framework

Currently, I am working on developing a mobile app using the Ionic framework. I have created a layout that resembles the one shown in this Card Layout. My question is: How can I make the card image display in full screen when clicked by the user and retur ...

javascripthtmlangularjsionic-framework

Unable to display image on HTML page transmitted via socket in Java

After successfully loading my simple HTML in Chrome and seeing it display correctly, I encountered a troubling issue when trying to pass it through a Java socket. Despite only passing bytes through the socket, the image always appears broken. The perplexin ...

javahtmlsocketsclient-server

Personalize the color scheme for your timeline paper

I am interested in customizing this specific example of a personalized timeline: import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Timeline from '@material-ui/lab/Timeline'; import Timeli ...

javascriptcssreactjsmaterial-ui

Aligning a element at the center is not functioning properly when using margin: 0 auto;

I'm having trouble aligning elements to the center when applying margin: 0 auto. You can view the code here: https://jsfiddle.net/helloworld123/vhhx1o7n/ The goal is to align the elements in the center of the page (.entry-wrap should be centered) and ...

css

What exactly does the "data-effect" attribute refer to?

After downloading a code, I came across the following line: <button data-effect="st-effect-4">Slide along</button> I noticed that "st-effect-4" is a class name in the code, but I am curious to know what exactly this data-effect attribute is u ...

htmlcss

Eliminate redundant XML entries when using jQuery autocomplete

Does anyone know how to prevent duplicate records from appearing in a jQuery autocomplete dropdown? I am pulling data from an XML file and want to ensure that each record is unique and only displayed once. You can see the issue here ...

javascriptjqueryhtmlajaxxml

Fill the list items with values from the given array

I have an array called var array = ["one", "two"]; and I want to display each element in a separate list item. The desired output is: <li>Number one</li> <li>Number two</li> However, the current output is: <li>Number onetw ...

phpjqueryhtmlajaxarrays

Explore nearby directories by utilizing the HTML file API in conjunction with JavaScript

Exploring the idea of developing an application that utilizes the HTML5 file API and JavaScript to accept a directory path as user input, allowing for the processing (text search) of all files within that directory and its subdirectories. Instead of my cu ...

javascripthtml

Designing rows and columns using Angular CSS within an ngFor loop

Is there a way to align items in a row or column based on conditions within an *ngFor loop? I want the input type to display on the next line if it is textarea, and on the same line otherwise. Check out this Stackblitz Demo for dynamically generated HTML ...

cssangular6ngfor

Why does my Div seem to be ignoring the height inherited from the html or body elements?

Is there a way to make the landing-wrapper div expand to fill 100% of the screen on a landing page? Many suggestions advise setting the html/body height to 100%. I've already tried that, but it doesn't seem to be working. I'm using React and ...

htmlcssreactjs

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...

htmlcss