Placing an image on top of a colored background container

I attempted to design a layout similar to the image provided, but I'm facing difficulties with overlapping the image on the red bar located on the right side. Could someone please guide me on how to achieve this using CSS within my Bootstrap framework?

https://i.sstatic.net/3ZOPl.png

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">
  <div style="background-color:#2c2c34;" class="row">
    <div class="col-md-10">
      <aside class="graybar-text">
        <h1 style="font-size:60px">
          The opportunities <br> with SAMTL are <br> limitless
        </h1>
        <p style="font-size:20px">
          Our essence includes top-notch Asset<br> Management services, Trusteeship and Property<br> development.
        </p>
        <img style="padding-top:160px;width:100%; z-index: -1;" src="https://via.placeholder.com/500x250">
      </aside>
    </div>
    <div style="padding-top:350px;" class="col-md-2">
      <aside class="redbar">
        <div style="padding-left:110px;" class="btn-group-vertical">
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
          <ion-icon name="radio-button-off"></ion-icon>
        </div>
      </aside>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

To achieve this effect, one method is to place the image inside a container with position: relative and overflow: visible in order to allow it to overlap other elements.

Here is a basic example demonstrating this technique:

.main-content {
  background: #ffcc9a ;
}

.bg-red {
  background-color: red;
}

.image-container {
  position: relative;
  overflow: visible;
  margin-bottom: 100px;
  width: 110%;
  z-index: 10;
}

.image-container img {
  width: 100%;
  padding-top: 100px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container main-content">
  <div class="row">
    <div class="col-12">
      <h1>Some text here</h1>
    </div>
  </div>
  
  <div class="row">
    <div class="col-8 offset-2">
      <div class="image-container">
        <img src="https://via.placeholder.com/500x250">
      </div>
    </div>
    
    <div class="col-2 bg-red"></div>
  </div>
</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

Incorporate a curved progress line into the progress bar

Currently, I am working on creating a customized progress bar: .create-progress-bar { padding: 0 !important; margin: 25px 0; display: flex; } .create-progress-bar li { display: flex; flex-direction: column; list-style-type: none ...

htmlcss

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

htmlbuttonhideshow

Struggling to reveal concealed items on a webpage using jQuery and attempting to cycle through an array without success

Looking to display or hide certain sections on a page based on specific conditions. I want to only show the sections of the page that contain words from the conditionsToShow array. function hideWorkflowConditions() { // initially hide the elements ...

javascriptjquerycss

Include a new class in the classList of an element at a specific index

Is it possible to add a class to a specific position in order to maintain a certain order, especially when it goes against the logic that targets the class based on its position? link.closest('item').classList.add('c-class') // Contrad ...

javascripthtml

Tips for avoiding anti-aliasing of bitmap font on Internet Explorer and Firefox

I am currently experiencing issues with font smoothing when using a basic bitmap font for icons. While the font appears crisp in Chrome, it appears blurry in IE and FF. Do you have any recommendations on how to resolve this problem? You can view a screen ...

cssiconsfont-face

Guide on embedding PHP code into a HTML div element using JQuery

I am having trouble loading PHP code into a div tag to display the results. The code I have listed below does not seem to work for me. If anyone can offer assistance in resolving this issue, I would greatly appreciate it. Here is the code snippet: <h ...

javascriptphpjqueryhtml

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Currently working on an HTML5 project with Javascript, here is a snippet of my code: Your inquiry <textarea type="text" name="phrase" id="phrase" cols="50" rows="5" placeholder="Write your text here. . ."></textarea> I am looking for a way ...

javascripthtmltextarea

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11

inserting picture within the code

Looking for some feedback on this: I decided to use a third-party image host to create the code (I've used them in the past). However, when I added the code to my page where I intended it to be (after verifying in Google Inspect), the image does not a ...

htmlimage

Vertically Center Image in a Div

I have been struggling to center an image within a div, but all the usual methods like using margin: auto; do not seem to work. I have tried various popular techniques with no success. <style> /* Add a black background color to the top navigation ...

htmlcsscss-grid

Having trouble using the search feature on ngx-mat-select-search for typing?

I am experiencing an issue with searching while using ngx-mat-select-search. I am able to display the options, but when I try to type in a search query, nothing appears on the screen. Can anyone provide assistance? Below is the code snippet: <div *ng ...

htmlangularangular-material

Is it possible to create a hyperlink on the second page that directs to the first page and triggers a specific JavaScript function on the first page?

Working with a former colleague's code in C#, asp.net MVC, Telerik/Kendo controls. I am trying to navigate to a specific section on a page from another page that uses tabs/sections with links at the top of the page to toggle visibility based on the se ...

javascriptjqueryhtmlasp.nethyperlink

Modifying Table Cell Background Color in ReactJS: A Guide to Conditionally Updating Cell Color Without Affecting the Entire Row

I am working on changing the background color of a cell based on its value. Currently, I am utilizing the following library: react-data-table-component Procedure: If the value is above 0, then the cell's background color will be red. Otherwise, th ...

cssreactjsdatatablefrontend

Multiple occurrences of IP addresses in MySQL

Looking for assistance. I have categories and comments stored with IP addresses. I need to validate all categories for repeated IPs. For each user who uses the same IP twice, add a CSS class (red) to their name. If they use it three times, add another CSS ...

phpmysqlcssip

JavaScript libraries are not required when using the .append function to add HTML elements

Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...

javascriptjqueryhtmlajax

implement some level of control within the ngFor directive in Angular

For instance, let's say I have an ngfor loop: <ng-container *ngFor="let setting of settings | trackBy: trackById"> <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-me ...

htmlangulartypescriptangular-material

Commencing CSS Animation Post Full Page Loading

I am looking for a solution using WordPress. In my specific case, I want the CSS Animations to take effect only after the page has completely loaded. For example: click here This is my HTML: <div class="svg-one"> <svg xmlns="ht ...

javascriptcsswordpresssvgcss-animations

How can I make col-8 and col-4 display next to each other?

Here is the code snippet I recently submitted: <section class="main-container"> <div class="grid-row no-gutters"> <div class="column-8"> <img class="full-width-img& ...

htmlcssbootstrap-4

Automatically organize <mat-list-item> elements within a <mat-list> container

Here is the code snippet: <div> <mat-list fxLayout="row" dense> <mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings --> <button mat-button> ...

htmlangularangular-material

What are the steps to retrieve information from a raw HTML document?

Can data be extracted from a poorly written HTML file without IDs or classes? For example, if there is an unstructured saved HTML file of a profile webpage and I want to extract specific information like 'hobbies', can PHP be used for this task? ...

phphtmlparsinghtml-content-extraction