What is the best way to divide the background into two distinct colors behind an image by utilizing bootstrap?

Question

What is the best way to divide the background into two distinct colors behind an image by utilizing bootstrap?

Can someone help me with this in bootstrap?

I'm attempting to accomplish the following. Thanks in advance! Here are the codes I have so far:

<body>
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active mr-5">
                <a class="nav-link" href="index.html">Home</a>
              </li>
              <li class="nav-item mr-5">
                <a class="nav-link" href="#">Profile</a>
              </li>
            </ul>
        </div>
    </nav>
    <section>
        <div class="container d-flex justify-content-center">
            <img class="img-fluid" src="img/profile.jpg">
        </div>
    </section>
</body>

html css bootstrap-4

Answer 1

Answer №1

To achieve this effect, you do not need to be familiar with bootstrap. Just use CSS along with the before and after pseudo-classes.

Here is an example:

div {
  display: flex;
  width: 100%;
  height: 200px;
  position: relative;
}

div::before, div::after {
  content: '';
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
}

div::before { top: 0; background-color: #e6ccff }

div::after { bottom: 0; background-color: #99ffd6 } 

img {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

<div>
  <img alt="example" src="https://64.media.tumblr.com/5620d4d19c203bbdd9638b662263e45e/tumblr_pyn0cwSNl71y47v4mo1_1280.jpg" />
</div>

Answer 2

To achieve this effect, you do not need to be familiar with bootstrap. Just use CSS along with the before and after pseudo-classes.

Here is an example:

div {
  display: flex;
  width: 100%;
  height: 200px;
  position: relative;
}

div::before, div::after {
  content: '';
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
}

div::before { top: 0; background-color: #e6ccff }

div::after { bottom: 0; background-color: #99ffd6 } 

img {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

<div>
  <img alt="example" src="https://64.media.tumblr.com/5620d4d19c203bbdd9638b662263e45e/tumblr_pyn0cwSNl71y47v4mo1_1280.jpg" />
</div>

Answer 3

Answer №2

.container_image {
  width: 100%;
  min-height: 100px;
  background: linear-gradient(blue 0%, blue 50%, green 50%, green 100%);
}

<div class="container_image">
  
</div>

It seems that achieving this with Bootstrap may be challenging.
However, you can utilize linear-gradient as demonstrated in the example.

Answer 4

.container_image {
  width: 100%;
  min-height: 100px;
  background: linear-gradient(blue 0%, blue 50%, green 50%, green 100%);
}

<div class="container_image">
  
</div>

It seems that achieving this with Bootstrap may be challenging.
However, you can utilize linear-gradient as demonstrated in the example.

Answer 5

Answer №3

A simple solution involves using a top div and a bottom div with the image centered in between them, positioned relative to move it up by half its height.

Credit goes to @Hải Bùi for providing the initial code structure which I then customized further.

.top {
  height: 100px;
  background-color: #e6ccff
}


.bottom {
  height: 100px;
  background-color: #99ffd6;
  text-align: center;
}

img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: relative;
  top: -50px;
}

<div class="top"></div>
<div class="bottom">
  <img alt="example" src="https://64.media.tumblr.com/5620d4d19c203bbdd9638b662263e45e/tumblr_pyn0cwSNl71y47v4mo1_1280.jpg" />
</div>

Answer 6

A simple solution involves using a top div and a bottom div with the image centered in between them, positioned relative to move it up by half its height.

Credit goes to @Hải Bùi for providing the initial code structure which I then customized further.

.top {
  height: 100px;
  background-color: #e6ccff
}


.bottom {
  height: 100px;
  background-color: #99ffd6;
  text-align: center;
}

img {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  position: relative;
  top: -50px;
}

<div class="top"></div>
<div class="bottom">
  <img alt="example" src="https://64.media.tumblr.com/5620d4d19c203bbdd9638b662263e45e/tumblr_pyn0cwSNl71y47v4mo1_1280.jpg" />
</div>

What is the best way to divide the background into two distinct colors behind an image by utilizing bootstrap?

Answer №1

Answer №2

Answer №3

Similar questions

Can the site be shown in the background?

Can a JavaScript framework be created to ensure all browsers adhere to standards?

Experimenting with the routerLink directive in Angular 2

Unusual problem arises with the positioning of widgets in Blogspot due to the use of CSS `position

What steps should I take to confirm the text exists within a particular <DIV> element using Selenium WebDriver (java) and Chrome?

JavaScript tool for connecting tags with JSON properties

Troubleshooting Bootstrap 4 Fixed Column Overlapping Issues when Resizing

Modify CSS class if user is using Internet Explorer version 10 or above

Even when the dimensions are set to 100 width and height, the scroll bar still makes an

Adjusting the input label to be aligned inside the input box and positioned to the right side

Angular causing WKWebview to freeze

Unable to utilize first-child CSS to establish the display

Remembering position in JSP using Java Beans

Returning draggable elements to their original placement

What is the best way to display the counter result on the cards at the top of an html webpage?

Include a hyperlink to a website that was created with the help of Photoshop

Is PHP the best choice for creating simple websites?

Struggle with incorporating a file

I am having trouble getting Google Maps to load

The Bootstrap modal stubbornly refuses to close even after resetting the HTML body