Why is the combination of the overlay image, logo, and text not producing the desired outcome?

After adjusting the logo's resolution from 3400x1716 to 99x50 and overlapping it with a picture while adding text, I set the image dimensions to 300 height and 100% width to fill out the page. However, when looking at my code, the logo and text that were meant to superimpose the picture are not visible.

I am working on a project that involves 12 pictures, each with different text but using the same logo.

Below is a snippet of the CSS and HTML code:

.portfolio-items-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item-wrapper {
    position: relative;
}

.portfolio-img-background {
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-text-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding-left: 100%;
    padding-right: 100%;
}
<div class="content-wrapper">
    <div class="portfolio-items-wrapper">
        <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background" style="background- image:url(images/portfolio1.jpg)"></div>
            <div class="img-text-wrapper">
                <div class="logo-wrapper">
                    <img src="images/logos/thought.png">
                </div>
                <div class="subtitle">
                    Using a different approach than the NORM!
                </div>
            </div>
        </div>
        <div class="portfolio-item-wrapper">
            <div class="portfolio-img-background" style="background- image:url(images/portfolio2.jpg)"></div>

            <div class="img-text-wrapper">
                <div class="logo-wrapper">
                    <img src="images/logos/thought.png">
                </div>
                
                <div class="subtitle">
                    Everything starts with a THOUGHT!
                </div>
            </div>
        </div>
    </div>
</div>

Answer №1

If you want to achieve the desired layout, you can continue with the method you initially started with. This involves setting a background image for your parent container and then utilizing flexbox to position the text and logo elements accordingly.

img {
  width:50px;height:50px;
}

div {
  background-image:url('https://static-cse.canva.com/image/1578/RoyalBlue_Set1_23.5dfc6872.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  width:300px;height:300px;
  display:flex;align-items:center;flex-direction:column;justify-content:center;
  color:#FFF;font-size:36px;
}

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

Creating a responsive design using Bootstrap4

Today, I made the switch to bootstrap4 and enabled flexbox in _variables.scss. However, I'm still confused about the flexbox capabilities of bootstrap4. Some questions I have include: How can I utilize flex-direction:column? Is it possible to creat ...

Inconsistencies with Handlebars adding forward slashes "/" to page addresses are causing confusion among users

In my project, I have 10 unique .handlebars files that are being called using express GET methods as shown below: app.get('/pagename1', function(req, res, next) { res.render('page1'); }); app.get('/pagename2', function(req ...

The rendering of HTML code may vary between Outlook email and a web browser

I am experiencing an issue with a small HTML code that works perfectly in a browser, but when I use it in an Outlook email, it does not render correctly. <html> <head> <style> </style> </head> <body> <table ...

Discovering text on a webpage and extracting its XPath or CSS using Selenium and Java

Imagine a scenario where there is a page displaying various items on a table that changes in both order and quantity randomly. The task at hand is to locate a specific item labeled "Itemx" by its text, extract its XPath or CSS, and then use it in another ...

Tips for showcasing HTML as code tailored to certain programming languages

While browsing the web, I stumbled upon a website that had SQL code displayed with specific classes and styles applied to it. For example, table names were colored blue when inspected. Here is a glimpse of what I encountered: https://i.sstatic.net/WAacj.p ...

Navigating through every node in an XML document

Can anyone assist with JavaScript? I have a XML file and need to loop through all node elements using JavaScript, not JQUERY. The goal is to print all node names and their values. Here is the XML file: <?xml version="1.0" encoding="UTF-8"?> <bo ...

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

What is the best way to set up Storybook.js Webpack to support absolute image paths within CSS modules for a Next.js project?

I'm currently setting up Storybook to integrate with Next.js, Ant Design, Less, and TypeScript. In Next.js, images need to be stored in the public/ directory and linked using absolute paths for universal usage within the project. I am facing challenge ...

Guidelines for choosing input using jQuery

I am looking to retrieve the value of an input using jQuery. Specifically, I need to extract the value of a hidden input with name="picture" when the user clicks on the حذف این بخش button by triggering the function deleteDefaultSection( ...

Align the present domain using XPath

Is there a way, possibly with a newer version of XPath, to make the following code work: //a/@href[not contains("DOMAIN OF THE CURRENT PAGE")] The DOMAIN OF THE CURRENT PAGE should function as a variable that retrieves the domain - similar to something l ...

Can a div with float: left; be centered?

Currently, I am attempting to create a dock (similar to the iOS dock) for my website. Below is the full code that I have implemented: function addPrevClass(e) { var target = e.target; if (target.getAttribute('src')) { // check if it is img ...

When you hover over HTML tables, they dynamically rearrange or shift positions

Issue: I am encountering a problem with multiple tables where, upon hovering over a row, the tables are floating rather than remaining fixed in place. Additionally, when hovering over rows in the first or second table, the other tables start rendering unex ...

What's the HTML counterpart to a CSS style sheet?

Is there a way to include a navigation div in all HTML documents without having to repeat it in each one? I'm looking for a solution that doesn't involve adding the entire div to every document, similar to how CSS stylesheets work. I am unaware ...

Transitioning effect when tapping a link that guides you to a different section of the webpage

Just by reading the title, you can understand my concern. Currently, when I click on "Example 4", the page abruptly scrolls to the h1 of Example 4. It looks so ungraceful, like a sudden boom. I would prefer a smooth scrolling effect. Is it possible to achi ...

Switch webpage HTML content to XLS format

Hey folks, I'm a bit uncertain about my client's requirements but thought sparking a conversation might help. My client is looking to extract HTML data from a webpage and convert it into an XLS format. The content is all sourced from their own w ...

Navigation that sticks and changes upon hovering over div elements

Just delving into the world of jQuery and JS, so I appreciate your patience:) Currently, I have a sticky navigation bar positioned at the top of my webpage that links to different sections of content below. I am looking to create an effect where the corr ...

What is the method for superimposing a div with a see-through input field?

I am currently designing a compact upload feature. It consists of a responsive element (actually a vue/quasar card) that adjusts in size according to the window dimensions and viewport. Within this element, there is a form containing an input field and a ...

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...

When the mouse button is released or when an event listener is

I've been pondering a question that has yet to be fully answered. When I implement this technique to catch a mouse up event: <div onmouseup="/*Script to be executed*/"></div> Is it more efficient than this newer approach: <div id=" ...

Loading production assets from a user's local host instead of an Ubuntu server in Rails

After successfully deploying my Rails application to an Ubuntu 16.04 Droplet, I encountered a problem with the CSS when running the server locally. The website could be accessed at myappname.com through the browser as long as the rails server was active, b ...