Unable to display image using HTML and CSS

I want to display two images (download and view) on top of another set of images. Here is the HTML code:

    <div class="row">

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

Below is the CSS being applied:

.backgrounddownload:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
background-image: url(download.png);
}


.backgroundview:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 50px;
left: 35px;
background-image: url(view.png);
}

The issue I am facing is that the second image, specifically dowload.png, is not loading properly. When I inspect in Chrome, the .backgroundview:after element appears to be disabled. It seems like having two :after elements might be causing this problem. Any suggestions on how to resolve this?

csshtmlimage

Answer №1

The container .backgrounddownload needs to have its position: relative set in order for the absolute elements within it to be properly positioned. Without this, the elements will be positioned in relation to the body instead.

To fix this, add the following CSS rule:

.backgrounddownload {
  position: relative;
}

Check out the Fiddle here

Update:

It appears that there was a misunderstanding on my part. Instead of using two :after pseudo-elements, you can also utilize the :before pseudo-element.

.backgroundview:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 5px;
  background: #fff
}

View the updated Fiddle here

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

When using HTML/Bootstrap5, the ms-auto class does not correctly align items to the right in the navbar

I'm currently working on mastering bootstrap through an online tutorial, but I've hit a roadblock when it comes to right-aligning items in a navbar. I've double-checked my code against the instructor's, and it's a perfect match: &l ...

htmlcssbootstrap-5

Creating a form in PHP with the power of JavaScript, AJAX, and jQuery

I have successfully created a registration form using HTML, processed the data with PHP, and utilized javascript, ajax, and jquery. However, I am facing an issue where I want to display a notification stating whether the operation was "inserted/failed" on ...

javascriptphpjqueryhtmlajax

Tips for Locating an Element by Its Attribute in JQuery

I currently have a variable that holds a list of selects, and my goal is to filter out only those with a 'dependsOn' attribute set to 'EventType'. My initial attempt below doesn't seem to work as intended and returns a count of 0: ...

javascriptjqueryhtmlcssselect

What are the steps to customize the format of Vue3 Datepicker extensions?

Is there anyone who can lend a hand? I am currently using the Vue3 Datepicker and I have received a value that looks like this Thu Jun 23 2022 17:14:00 GMT+0700 (Western Indonesia Time) Does anyone know how to transform it into the following format? Thu, ...

htmlvue.jsvuejs3

applying flexbox for overlay with overflow effect

During the checkout process, I implemented an overlay on top of the website that disables scrolling on the body but allows overflow on the overlay. However, the content on the overlay gets clipped if the viewport is too small. How can this issue be preve ...

htmlcss

Position images to the left, stacked on top of each other, with text centered on the right side of the picture

I have 5 images that I want to stack on the left side, with text displayed beside each image to the right and centered vertically. I've managed to stack the images, but the text is appearing below them instead of beside. Yes, I'm trying to creat ...

htmlcss

Can you explain the distinction between using ":" and "::" both before and after a word?

Can someone clarify whether I should use ":" or "::" before and after in this context? I'm curious if there's any distinction between the two. ...

htmlcss

modify the css styling of a polymer component

I have implemented the paper-input element with a pattern and an error message. <paper-input label="Horas" name="hours" auto-validate required pattern="([0]:[0-5][0-9])|([1-9]|[1][0-9]|2[0-3])(:[0-5][0-9])?" error-message="Invalid hour format">< ...

csspolymer

Guide on implementing autocomplete in Angular Material with a dynamic SQL data source

I struggled to get it working using the mat-table option and even searched on YouTube, only finding hard-coded autocomplete examples. I have included some relevant code segments - thank you for your assistance. Visit this link for more information on Angu ...

javascripthtmlangulartypescript

Display my search box when the button is activated

I have a button labeled "Search" that I want to click in order for my search field (which is currently hidden with display:none) to become visible. However, my current setup is not working as intended. I have created a jsfiddle to illustrate my issue. Al ...

htmlcssmodx

Creating personalized HTML with a script source

Having trouble using my custom HTML file as a script src: function(){ var ctx; function setupCanvas(setupVariable){ ctx = setupVariable; }; function circ(x, y, lps, wps, fill, outline){ if(outline === true){ ...

htmlsrc

Transferring information from a Form to various web pages using a single JavaScript source file

After successfully creating a basic login page with hardcoded credentials, I faced a challenge. While I could transition to the next page once the user logs in, I struggled to display the username entered on the first page onto the second page. I attempte ...

javascripthtml

How to conceal an element using CSS in a bootstrap4 `card` when the columns are narrow

In my grid layout, I have a maximum of 12 image cards per row. When there are 12 cards in a row, the size becomes quite small, so I want to show just the image. However, when there are only 6 cards in a row, I would like to display the description as well. ...

htmlcsstwitter-bootstrapbootstrap-4

The Bootstrap button is experiencing difficulties with resizing

When utilizing the bootstrap CDN in conjunction with another bootstrap CSS example file located in the static directory, I encountered an issue while attempting to create a file input and submit button for a form. Despite my efforts, I was unable to adjust ...

htmlcssformsbootstrap-4

Mosaic-inspired image gallery with HTML and CSS styling

Can anyone help me create a couple of styled "blocks" in HTML and CSS similar to the design shown in the image? I've searched for templates but can't find anything that matches my vision, so any assistance would be appreciated. (links not require ...

htmlcssblocktilemosaic

Tips for integrating DataTables selection filtering functionality

Here's a snapshot of my screen I'm attempting to utilize data tables This is what I have on the main page $('#student-listing-table').dataTable(); $('#student-listing-table').find('label').html('Search By Nam ...

phpjqueryhtmldatatabledatatables

The challenge of character encoding when utilizing a combination of HTML5, jQuery, PHP

A webpage using HTML 5 has the following code in the header: <meta charset="utf-8"> Within the same page, an Ajax request is made using jQuery in the following manner: $.ajax({ url: "ajax/subscribe.php", type: "POST", encod ...

jqueryajaxhtmlcharacter-encoding

Showcasing Information Using AngularJS from a Json Array

My goal is to present data from a JSON array in a table using the code below. However, all the data is currently being shown in one row instead of each record appearing on separate rows with alternating colors - grey for even rows and white for odd rows. I ...

javascriptcssjsonangularjs

Are Twitter Bootstrap buttons compatible with iPad devices?

Have you ever tried using the attractive buttons provided by Twitter? They can be a great alternative to standard radio/checkbox options. If you have used them in your production, how effective were they? I am particularly curious about their compatibilit ...

javascripthtmltwitter-bootstrap

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

javascripthtmltwitter-bootstrapvue.jsnuxt.js