Tips for aligning an image within a CSS-created bar graph

Would it be possible to position an image inside each bar of a bar graph without changing the bar's size? I've figured out how to do this with text, but not with an image. Alternatively, would it be better to place the image to the left of each bar, similar to a traditional bar graph?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>SF6</title>
</head>
<body>
    <main>
        <section id="tall">
            <article class="tall">
                
                <div>
                <p>Sages <img src ="./badge/some_stuff_for_richard5.png" height="50" ><span></span><span class="tall"></span></p>
            </div>
            <article class="tall">
                <div>
                <p>prophet<span></span><span class="tall"></span></p>
            </div>
            <article class="tall">
                <div>
                <p>renegade<span></span><span class="tall"></span></p>
            </div>
        </article>
        </section>
    </main>
</body>
</html>

html{
    font-size: 100%;
    font-family: sans-serif;
}
body{
    background-color: #1a1a2e ;
}
html,
body,
main{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content:center ;
    align-items: center;
}

section{
    background: #1a1a2e
}
section article.tall{
    width: 500px;
    height: auto;
}
section article.tall p {
    color:#ffffff;
    padding: 10px;
    position:relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;


}
section article.tall p img{
    color:#ffffff;
    padding: 10px;
    position:relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;

}
section article.tall div span:nth-child(1){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    background: #0f3460;
    z-index: -2;
    height: 100%;
    width: 100%;
}
section article.tall div span:nth-child(2){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    background: rgb(94,227,255);
    background: linear-gradient(90deg, rgba(94,227,255,1) 0%, rgba(11,113,230,1) 100%);
    z-index: -1;
    height: 100%;
    width: 100%;
}

Answer №1

If you utilize Flex, you can achieve your desired outcome by making certain adjustments. However, without clear clarification on your requirements, I have based my response on what I inferred from your query.

 <main>
    <section id="tall">
        <article class="tall">
            <div>
                <p>Sages <img src ="./badge/some_stuff_for_richard5.png" style="margin-left: 10px;"><span></span><span class="tall"></span></p>
            </div>
        <article class="tall">
            <div>
                <p><img src ="./badge/some_stuff_for_richard5.png" style="margin-right: 10px;">prophet<span></span><span class="tall"></span></p>
            </div>
        <article class="tall">
            <div>
                <p>renegade<img src ="./badge/some_stuff_for_richard5.png" style="margin-left: 10px;"><span></span><span class="tall"></span></p>
            </div>
    </article>
    </section>
</main>
html{
    font-size: 100%;
    font-family: sans-serif;
}
body{
    background-color: #1a1a2e ;
}
html,
body,
main{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content:center ;
    align-items: center;
}

section{
    background: #1a1a2e
}
section article.tall{
    width: 500px;
    height: auto;
}
section article.tall p {
    display: flex;
    align-items: center;
    color:#ffffff;
    padding: 10px;
    position:relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
    height: 38px;
}
section article.tall p img{
    display: block;
    color:#ffffff;
    position:relative;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
    height: 30px;
}

section article.tall div span:nth-child(1){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    background: #0f3460;
    z-index: -2;
    height: 100%;
    width: 100%;
}
section article.tall div span:nth-child(2){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    background: rgb(94,227,255);
    background: linear-gradient(90deg, rgba(94,227,255,1) 0%, rgba(11,113,230,1) 100%);
    z-index: -1;
    height: 100%;
    width: 100%;
}

Explore further on flex and align-items...

https://i.sstatic.net/SjmkB.png

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

Tips for highlighting HTML syntax within JavaScript strings in Sublime Text

Is there a Sublime package available for syntax highlighting HTML within JavaScript strings specifically? (Please note that the inquiry pertains to highlighting HTML within JS strings only, not general syntax highlighting.) Currently, I am developing Ang ...

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

What are the steps to create a dynamic navigation menu in Angular 2?

I have successfully implemented this design using vanilla CSS and JS, but I am encountering challenges when trying to replicate it in Angular 2. Setting aside routing concerns, here is the current state of my component: navbar.component.ts import { Comp ...

Display function not functioning properly following AJAX request

I'm working on a functionality where I want to initially hide a table when the page loads, and then display it with the results when a form is submitted using Ajax. The issue I'm facing is that the code refreshes the page and sets the table back ...

Is it possible to generate a PNG blob using binary data stored in a typed array?

I have a piece of binary data that is formatted as a PNG image. I am looking to convert it into a blob, generate a URL for the blob, and then showcase it as an image in various places where an image URL can be used, such as CSS. My initial approach invol ...

Tips for displaying and concealing a toggle button based on screen size changes

My goal is to display my userlist without a toggle button by default when the screen is in full size, and only provide a toggle button when the screen is in mobile size to allow users to show/hide the list. Currently, I am utilizing the following code: & ...

Utilizing Angular to Handle Undefined Variables in String Interpolation

Seeking a way to showcase data obtained from an external API on a webpage using Angular's string interpolation. If no data is retrieved or is still pending, the aim is to display 'N/A'. An attempt was made following this method, but encoun ...

Insert a variety of images onto the page at the exact position where the user has

Looking to create a script that selects a random image from an array and displays it at the current mouse position. Additionally, you can click elsewhere to add a new image, allowing you to cover the entire page with random cat images if desired. docum ...

Is it possible to modify the cursor for disabled <button> or <a> elements in Bootstrap 4?

Is there a way to apply the cursor: not-allowed style to a button or a element? I've attempted the following: .not-allowed { pointer-events: auto! important; cursor: not-allowed! important; } Here is an example of my button: <a class=" ...

Find and make adjustments to the primary HTML document in your Magento online shop

Trying to enhance the top banner of my Magento website tamween.biz by adding a shadow effect PNG picture. Successfully managed this on my local server using firebug and creating a new class in the coding area with all selector properties modified in the bo ...

What are the steps to generate interactive hotspots in a 3D setting with threejs?

I'm new to working with three.js and I'm attempting to create a project similar to the example found at . I have everything set up using three.js, but I'm struggling to figure out how to implement a hotspot (like the red dot in the provided ...

Use Html.ActionLink to trigger events in various sections of the code

I'm attempting to create an ActionLink that will trigger an action in a different section of the code. Here is what I have so far: <div class="col-md-4"> @Html.ActionLink("Click to Perform Action", "Action", "SomeController") </div> ...

Display HTML content conditionally in Shiny R depending on the user's choice

I am working on a project where I need to display different HTML files based on user input. The user will make selections using two pickerinput elements, and depending on their choices, a specific HTML file will be shown. In my ui.R file, I have the follo ...

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

Tips for including a footer element in React:How can a footer division be

I need help with implementing a footer in my React web app. Currently, the body section in index.html looks like this: <body> <div id="root"></div> <script src="index.js"></script> </body> Inside index.js, the rend ...

Tips for Resizing google reCAPTCHA

The problem's image is shown below: https://i.sstatic.net/ph2EX.jpg Below is the code snippet related to the issue: <div class="text-xs-center" id="DIVCATCHA" runat="server"> <asp:HiddenField runat="server" ID="hdnImageSelected" /> ...

Transforming data from an HTML table into a MySQL database

Is there a way to transfer data from an HTML table created with JavaScript to a SQL database? I have been experimenting with the addRow(tableID) function but it doesn't seem to work. Any suggestions on how to solve this issue? Below is the code snipp ...

What is the best way to assign specific codes to separate pages using a single JS file?

I am currently working on a project that involves an authentication JavaScript which is responsible for managing user sign-ins and registrations. However, there are certain lines of code within this script that impact different pages in various ways. I n ...

Problem with looping through arrays in JQuery using .each() function

Looking for some help with jQuery and JavaScript, please bear with me if my question seems naive. I am attempting to load images from different folders into corresponding divs to create a gallery. <div id="menu"> <div class="gallery" id="div0"&g ...

problem with the clientHeight attribute in window event handlers

The component below is designed to react to changes in window resize based on the container height. However, there seems to be an issue where the containerHeight variable increases as the window size decreases, but does not decrease when I make the window ...