Ways to display a background image on top of a foreground image with CSS

My goal is to have the background image display in front of the foreground image.

Despite my attempts with the following code, it did not yield the expected result:

.background-image
  {
      border :0px;
      background-image: url(/images/icon.png);  
      z-index:1000;      
  }
  .foreground-image
  {
      width:200px;
      height:113px;
      border :0px;
      z-index:1;
  }

<div>
    <a href="#" class="background-image">
        <img class="foreground-image" src="./images/pic1.jpg"  />            
    </a>
</div>

My CSS version is CSS2.

css

Answer №1

Here's a method you can use.

Suppose this is your HTML:

<div>
    <a href="#" class="background-image">
        <img class="foreground-image" src="http://placekitten.com/200/100"/>  
    </a>
</div>

Simply add the following CSS rules:

div {
    border: 1px dotted blue;
}
.background-image {
    border: 1px dotted red;
    background-image: url(http://placekitten.com/200/50);
    background-position: center left;
    background-repeat: repeat-x;
    display: block;
    width: 500px;
}
.foreground-image {
    vertical-align: top;
    width: 200px;
    border: 0px;
    position: relative;
    z-index: -1;
}

Set position: relative on the image and lower it in the stacking order with z-index: -1.

Check out the demo here: http://jsfiddle.net/audetwebdesign/HUK28/

Answer №2

Get rid of the foreground image.

.background-image {
  border :0;
  background-image: url(/images/icon.png);
  width:200px;
  height:113px;   
  display: block;  
}
.foreground-image {/**/}

<div>
  <a href="#" class="background-image"></a>
</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

Issue with Bootstrap small column vertical alignment not functioning as expected

I am working on a bootstrap layout with two columns. One column contains multiple elements and text, making it quite long, while the other column only has an image. I am trying to center this image vertically within the left column of content. Here is the ...

htmlcsstwitter-bootstrap-3

Having divs stacked on top of each other with one positioned fixed and the other

In my HTML document, there is a main div element called container that contains several child elements also in the form of divs. One specific child div, named top_bar, has its positioning set to fixed, while the rest of the child divs have relative posit ...

htmlcssposition

Triggering an automatic pop-up window using JavaScript based on a PHP condition

I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...

javascriptphphtmlcss

Pictures acting erratic following the implementation of two setTimeout functions

I encountered an issue while developing a pong game using html/css/javascript. Everything was going smoothly until I introduced a second setTimeout() function. Here is the snippet of my html code: <!DOCTYPE html> <html> <head> <scrip ...

javascripthtmlcss

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

javascriptjqueryhtmlcssaddclass

Determine the amount of unused vertical space within a block of text

Having applied CSS to a span element: font-height = 120px; height = 120px; line-height = 120px; The text inside the span does not completely fill the height of 120px. Is there a method to determine the offset of the text from the top and bottom boundar ...

javascriptjquerycss

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code: * { margin:0; padding:0; } html, body, #wrapper{ height: 100%; } body &g ...

htmlcssfooter

Font size too large when using the em unit

The default font-size of my code is set to 10px or 0.625em. According to this, to make the font size of <p> 7px, I should use 0.7em. However, in my case, the browser is consistently using a fixed font size of 9px, even when I decrease the font size o ...

cssfont-size

Display of Navigation Bar in Angular is Not Proper

Currently diving into the world of Angular, I've encountered an issue with a material menu that isn't displaying correctly. The expected outcome based on my code should resemble this image: https://i.stack.imgur.com/z70Aq.png This snippet showc ...

javascripthtmlcssangular

Using JQuery to hide elements by setting CSS display as none instead of block

Is there a way to change the display of a content div to block when a specific tab is selected by the user, while hiding all other content divs? Here is the JQuery code I have tried so far: $(document).ready(function() { function resetTabs() { $("# ...

javascriptjqueryhtmlcss

Effective Ways to Add Space Between Label and Textfield in React Using MaterialUI

Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column t ...

cssreactjsmaterial-ui

"Is there a way to adjust the range slider to display currency instead of

I stumbled upon this amazing slider on codepen. Can someone guide me on how to adjust it to display a range from €500 to €6000 while keeping the vibrant red background? I've attempted various solutions like: <input id = "range" type = "range ...

javascriptjqueryhtmlcss

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

javascripthtmlcss

Unable to display a horizontal scroll bar

I'm having some trouble with implementing a horizontal scroll feature and can't seem to make it work. If you want to take a look, here is the fiddle Please provide me with assistance in identifying what mistakes I may be making edit Here is th ...

htmlcss

Is it necessary to add a line break after a span element generated by react, next, or bootstrap

There is a strange issue plaguing my code - I'm enclosing some text in a span tag and it's causing an unexpected line break. It's unclear whether React.js, Next.js, or Bootstrap is the culprit, but I can't seem to get rid of the pesky l ...

cssreactjsbootstrap-4next.js

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

javascriptangularjstwitter-bootstrapcssangularjs-ng-repeat

What is the best way to horizontally center an absolute button within a div?

I'm currently attempting to center an absolute button within a div at the bottom, but unfortunately it doesn't seem to be working as expected. Here is my current approach: .mc-item { background: #F0F0F0; border: 1px solid #DDD; height: 1 ...

htmlcsstwitter-bootstrapbootstrap-4

Having trouble locating an element with Xpath using Selenium Web Driver? Any suggestions for a more efficient way to find this elusive element?

Selenium Web Driver- I'm having trouble locating an element using Xpath. Any suggestions on a better way to locate the element below? <div class="gwt-Label">Declined</div> I attempted to retrieve the text in the element using the followi ...

cssxpathselenium-webdriver

Experimenting with media queries but struggling to make them function properly

I am relatively new to CSS and I am experimenting with media queries. Despite following advice on various Stackoverflow posts and other websites, I am unable to make them work. My goal is simple - to change the color of boxes when the screen width falls be ...

htmlcssmedia-queries

Struggling with integrating a mixin in your Polymer project?

I'm experiencing difficulties trying to implement a mixin in Polymer. I have created --test-theme, but it seems that the style is not being applied inside the element. Any suggestions on where I might be making a mistake? story-card.html <dom-mod ...

htmlcsspolymerpolymer-1.0