Layer one div background image over another div background image

My goal is to have the Mario image displayed on top of the background seen in the screenshot below. While I've managed to get it working, I'm struggling to center the Mario image properly over the background. Additionally, I would like to eliminate the unwanted repeating pattern from the background image. Code:

.marioHeader{
    background-image: url("resources/marioBackground.jpg");
    background-size: 600px;
    height: 500px;
    background-position: bottom;
    margin: auto;
}
.headermario {
    background-image: url("resources/banner.png");
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 200px;
    display: block;
    margin: auto;
}
<div class="marioHeader">
     <div class="headermario">
    </div>
  </div> 

View the current appearance here: https://i.sstatic.net/dUCOE.png

Answer №1

To easily center content, flexbox can be used by adding the following to the container div: https://jsfiddle.net/tdfu3em1/2/

Simply apply the following CSS properties:

display: flex;
justify-content: center;
align-items: center;

This will center the child div.

Regarding the repeating pattern, more information is needed to provide a solution. If the original image does not repeat, ensure you have specified no-repeat. What would you like to happen instead? Consider options such as leaving it blank or applying a background color depending on your desired outcome.

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

The HTML video controls in Safari take precedence over the window.name attribute

When using Safari 8.0.5, the controls attribute for the video element will change the value of window.name to "webkitendfullscreen". This is significant because I rely on using window.name to store client-side data in Safari's private mode, where loca ...

The file type input is not directing to the correct folder in Internet Explorer version 9

Could someone please assist me with this problem in IE9? After I select a file to upload, then choose another one, it shows "fakepath" in IE9. See the image below for more information: https://i.sstatic.net/QsJFk.png https://i.sstatic.net/3nWRC.png htt ...

Obtain distinct tag categories while maintaining their sequence with selenium in C#

I'm currently extracting data from an ePUB bible, where each chapter is in the form of HTML pages. My goal is to maintain the order of specific tags that are scattered throughout the HTML page. All chapters in the bible follow a similar structure like ...

What is the best way to ensure my images are responsive to the varying device sizes when displayed on this website?

In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns: One column will contain text, while the other will display images that complement the textual content. Below is the Bootstrap code snippet for the n ...

The z-index property does not seem to be affecting the positioning of images and buttons

I'm working on a school project creating an educational website about pumas. I want to have a set of buttons that are hidden behind an image, and when the user clicks on the image, the buttons should be revealed. However, I am facing an issue with the ...

Ensuring my website doesn't load within an iframe using PHP

I attempted to prevent my site from loading in other locations, but unfortunately, my efforts were unsuccessful even after using the following code. <?php header(X-Frame-Options: allow-from https://example.com); header(X-Frame-Options: deny); ?> Is ...

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

On my website, users can upload images, names, and descriptions which are saved in a MySQL database. The information is then fetched to display on the website. The code below allows users to enter this information and see it displayed when they click the s ...

Is there a way to smoothly incorporate a new animation into a page, while ensuring that existing elements adjust to make room for it?

I am looking to smoothly fade and move a hidden element (display:none) within the page, shifting other elements to animate into their new positions as necessary. When I reveal the hidden element by changing it to "display:initial," it should seamlessly a ...

Troubleshooting Vue.js and Laravel: Having trouble loading new image files, while the older ones load just fine

Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project. My current issue revolves around loading an image from the resources/js/assets directory. While ...

What purpose does the div tagged with the class selection_bubble_root serve in Nextjs react?

Just starting out with Nextjs and setting up a new Next.js React project. I used create-next-app to initialize the code base, but then noticed an odd div tag with the class 'selection_bubble_root' right inside the body. Even though its visibility ...

Using Angular material to display a list of items inside a <mat-cell> element for searching

Can I use *ngFor inside a <mat-cell> in Angular? I want to add a new column in my Material table and keep it hidden, using it only for filtering purposes... My current table setup looks like this: <ng-container matColumnDef="email"> < ...

What is the best way to select an HTML tag element using the :v-deep() selector?

When I utilize the following: ::v-deep img { ... } it functions but triggers a deprecation warning: [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. How can I achieve the same effect using ...

Create a vertical scrollable feature for the <ul> element when it is set to flex, limiting its height within the specified dimensions

In order to enhance user experience, I have implemented a live search bar that is only visible on mobile screens. For the CSS styling: .search-results { z-index: 9999; width: 80vw; position: absolute; top: 80%; left: 10%; } .search-results li ...

Setting Up One Stylesheet Based on Local Preferences

I am working on positioning translated text on a webpage. The word NEW in English and NOUVEAU in French need to be centered below a graphic. Since the words have different lengths, I am considering using absolute positioning. The challenge is setting the l ...

Can a specific input value be applied or utilized in any way?

I have limited coding experience, so please forgive me if this is a simple question. I am curious if it is possible to create a feature on a website where user input is utilized elsewhere. Specifically, I am looking to have an input box where a user enter ...

Container slide-show fill error

I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achi ...

Issue with displaying elements at intended layering order when parent element has fixed positioning

My web app features both upper and lower elements (div) with a position: fixed. Each element has child popups also with position: fixed. Even though I want to position the popup above its parent element, using z-index doesn't work due to inheritance ...

The loading of charts and animations is sluggish on mobile devices

My Chart.js chart starts with 0 values and updates upon clicking submit to load data from an external database. While this works efficiently on a computer browser, the load time is significantly longer when accessing the page on a mobile device. It takes a ...

Show the content of a div inside a tooltip message box in an MVC application

I have a MVC application where I need to show tooltip messages when hovering over my HTML div. HTML: <li class="Limenu" data-placement="right"> <span class="LessMenuspan btn-primary" pid="@i.ConsumerNo_" onmouseover="FacebookprofileTip(1, 0,thi ...

Go through the embedded classes within the WWW::Selenium module

Is there a way in the `WWW::Selenium` library to loop through this HTML structure and extract the hrefs? <div class="myGengo_wrap full_width"> <h1>Dashboard</h1> <div class="blue list"> <span class="title">Sections ...