Place a div with a background image on top of another image in the content

I have a challenge where I need to hide an image or i tag within a wrapper div if there is a background image present. The idea is that the icon inside the wrapper div should only be visible when there is no background image, and as soon as a background image is set, it should overlap and hide the icon.

However, my issue is that currently both the icon and the background color of the div are being displayed simultaneously.

HTML

<div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
</div>

CSS

.avatar {
    width: 40px;
    height: 40px;
    border: 1px solid cadetblue;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: cadetblue;
    background-position: 50% 50%;
    background-size: cover;
    position: relative;
}

.icon {
}
htmlcssflexboxtwitter-bootstrap-4

Answer №1

You may not be able to configure the i element to be positioned behind the background-image. However, you can achieve a similar effect by using the z-index property to hide the i element behind its parent element when necessary.

Take a look at the demonstration below:

.wrapper {
  display: inline-block;
  border: 1px solid;
  margin: 10px;
  padding: 10px;
}

.avatar {
  border: 1px solid cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: cadetblue;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.bck-image {
  background-image: url("http://placehold.it/50x50");
}

.img-fluid.avatar {
  width: 40px;
  height: 40px;
}

.my-icon-hidden .icon {
  z-index: -1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="wrapper">
  With background image
  <div class="img-fluid rounded-circle avatar bck-image">
    <i class="material-icons icon">account_circle</i>
  </div><br/>z-index: -1
  <div class="img-fluid rounded-circle avatar my-icon-hidden bck-image">
    <i class="material-icons icon">account_circle</i>
  </div>
</div>

<div class="wrapper">
  No background image
  <div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
  </div><br/>z-index: -1
  <div class="img-fluid rounded-circle avatar my-icon-hidden">
    <i class="material-icons icon">account_circle</i>
  </div>
</div>

If the image is within the img element, you can absolutely position the image above the i element so that if the img element is absent, the icon will still be displayed. See the demo below:

.wrapper {
  display: inline-block;
  border: 1px solid;
  margin: 10px;
  padding: 10px;
}

.avatar {
  border: 1px solid cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: cadetblue;
  background-position: 50% 50%;
  background-size: cover;
  position: relative;
}

.img-fluid.avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
}
.avatar i, .avatar img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.avatar i {
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar img {
  z-index: 1;
  object-fit: cover;
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="wrapper">
  Without img element
  <div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
  </div>
</div>

<div class="wrapper">
  With img element
  <div class="img-fluid rounded-circle avatar">
    <i class="material-icons icon">account_circle</i>
    <img src="http://placehold.it/100x100"/>
  </div>
</div>

Answer №2

To create a background image that covers any child element, including i or img, you can utilize a pseudo element like ::after.

.avatar {
  border: 1px solid cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.avatar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-position: 50% 50%;
  background-size: cover;
  border-radius: inherit;                  /* added to prevent overflow  */
  overflow: hidden;                        /* added to prevent overflow  */
}
.bck-image::after {
  background-image: url("http://placehold.it/100/f00");
}
.img-fluid.avatar {
  width: 40px;
  height: 40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="img-fluid rounded-circle avatar bck-image">
  <i class="material-icons icon">account_circle</i>
</div>


<div class="img-fluid rounded-circle avatar">
  <i class="material-icons icon">account_circle</i>
</div>

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

Particles.js fails to persist as I scroll down the HTML page

After creating a website page, I incorporated Particles.js for the background. However, when I scroll down, the particles seem to be confined to the initial corner of the screen and do not continue downward. Here are my current particle settings: #particl ...

javascripthtmlcssparticlesparticles.js

How to position Angular Component at the bottom of the page

I have been working on my angular application and recently created a footer component that I want to stay at the bottom of the page like a typical footer. The footer component is included in the default app.component.html file, which makes it visible on th ...

htmlcssangular

Using Selenium Python to interact with HTML elements based on their text content

My task is to interact with an HTML element that has an id like <span class="a-button-inner"> <input name="submit.addToCart" aria-label="Aggiungi al carrello dal venditore VERONCART SRL con prezzo 775,00&nbsp;€ & ...

pythonhtmlseleniumtextjupyter-lab

Images in the navigation bar are bouncing around on the page, even though the CSS and HTML configurations

We are experiencing some erratic behavior with our nav bar images that seems to occur only on page refreshes. The issue appears to be related to the loading of our sprite, which contains all the images for the nav bar links. Despite trying different float ...

csshtml

Safari is having trouble displaying the tab content background properly, while Chrome is not experiencing any

I am currently facing an issue with the CSS tab content on a website. The client requested to add an image in the background, which I have successfully implemented and tested on Chrome and IE. However, Safari seems to be cutting off the image. You can view ...

htmlcsstabs

Managing lost packets in websockets

Is there a built-in mechanism in Websockets to handle lost data? To simplify, let's say I send 3 packages from the server (node.js) to the client (vue js), and package number 2 gets lost. Can it be resent or can the client at least be notified with ...

htmlnode.jswebsocketws

What is the best way to incorporate a counter into my JavaScript game?

I've created this JavaScript game: window.onload = function() { canv = document.getElementById("gc"); ctx = canv.getContext("2d"); document.addEventListener("keydown", keyPush); setInterval(game, 1000 / 7); } px = py = 10; gs = tc ...

javascripthtml2d

Having Trouble with JQuery Triggering Tabs inside an iFrame

I am curious why this code functions properly on my parent's HTML page: $("#assessmentsTab").trigger("click"); but fails to work within my iFrame: $("#assessmentsTab", window.parent.document).trigger("click"); Does anyone have any suggestions? I ...

jqueryhtmltabs

Creating an HTML report in Oracle SQL*Plus with alternating row colors

When using Oracle sqlplus, I can easily convert query output into an HTML report by setting "markup html on". This is a simple way to publish a database report online. However, I do miss one thing - alternating colors for every other row. This feature is ...

htmloraclereportsqlplus

Clicking within a table cell will grant access to the adjacent cells

I have a table set up to display items, and I want to create an onclick event on cell[0] that will alert the data from cell[1] and cell[2. Can someone help me figure out the best approach to access this information? If you need to see my current code, it ...

javascripthtml

Creating a dynamic table in AngularJS with rotating values for rows and columns

I am seeking assistance in creating a table with a custom number of rows and columns. The table should have two input fields for specifying the number of rows and columns, and upon submission, the table should dynamically adjust to display the specified nu ...

javascriptjqueryhtmlangularjs

JavaScript Age confirmation Overlay

I designed an age verification popup with the help of some online tutorials and a friend due to my limited knowledge of JavaScript. Check it out live here- My issue is that I want this popup to load/appear after the page content loads, but I'm not s ...

javascriptjqueryhtmlcss

turn off forwarding function in videogular

import {VgCoreModule} from 'videogular2/core'; import {VgControlsModule} from 'videogular2/controls'; import {VgOverlayPlayModule} from 'videogular2/overlay-play'; import {VgBufferingModule} from 'videogular2/buffering&ap ...

javascriptjqueryhtmlangularvideogular

Is it possible to center align a div without specifying the width?

After doing some research, it appears that the solution to my issue is not very promising. I want to avoid using a table for this particular case. My menu consists of 6 'a element' inline-blocks, which look great except for the fact that their wi ...

javascripthtmlcss

Hover events in the browser are currently operating at a sluggish pace

When I hover over a photo, an overlay is supposed to appear. However, if I move the mouse quickly (from the top to the bottom of the page, for example), the overlay remains visible even after I stop hovering over the photo. I have tried different event ha ...

cssreactjshover

Issue encountered while attempting to retrieve the element's styling attribute via the HTML console

Need help extracting the value of an element within the DOM. Specifically, I am interested in retrieving the "Active" value from the style attribute: <span ng-class="{'megatable-filter-box-txt-selected' : filter.value.length > 0}" class="n ...

javascriptjqueryhtmlcss

A guide on implementing Mail Merge Template files in PHP

I am new to mail merge and I'm not sure if it's even possible. I have created a template in mail merge, but I don't know how to use PHP to send emails to a list of clients like an RSS feed. Can someone confirm if this is feasible and provide ...

phphtmlmailmerge

Ways to incorporate a CSS template into JSF

I'm currently developing a web application using Java NetBeans, and I am looking to incorporate a CSS template for the visual interface. However, I am unsure of how to go about implementing it. ...

javacssnetbeans

Utilize the identical mathematical equation across various jQuery values

I have a JavaScript code that calculates the size of circles on the screen based on multiple variables. Currently, I am repeating the same equation for each circle by numbering all the variables accordingly. Is there a way to simplify this process and run ...

javascriptjquerycssequations

Hovering over a Div tag to slide it out

I need help creating an animation that makes a div slide out when the mouse hovers over it, and stay out until the mouse moves away. I'm new to React so any guidance would be appreciated. Here is my code snippet: return ( <div id="homeDiv"> ...

javascripthtmlcssreactjsanimation