Setting a background image at 50% opacity on a container-fluid: What you need to know

Just to clarify, I'm not looking for someone to solve this problem for me. I've been trying to figure it out on my own but haven't had any luck. I've searched for similar solutions online, but none of them have worked for what I need specifically.

Here's the situation: I have a website design in Illustrator where I need to create a container that is divided 50% image and 50% color. I've attempted multiple methods to achieve this, but I can't seem to get it to work, especially when it comes to responsiveness.

If anyone has experience with Bootstrap and could help me figure this out, I would greatly appreciate it. I'm really curious to see how this can be accomplished using Bootstrap.

Just as a heads up, I am using Bootstrap.grid.css for load time efficiency, so I don't have access to all Bootstrap classes available.

csstwitter-bootstrapbootstrap-4

Answer №1

Make sure to thoroughly review Bootstrap's documentation on the Grid Layout

You can achieve your desired layout using rows and columns; the responsiveness of the content inside depends on how you structure it

.img-bg {
  background: url("https://via.placeholder.com/1600")
}

.color-bg {
  background: green;
  text-align: right;
}

.row>div {
  height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6 img-bg">
      <span>This background is an image</span>
    </div>
    <div class="col-6 color-bg">
      <h2>Lorem Ipsum</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugiat architecto blanditiis eaque laborum, vel voluptatum voluptas asperiores odio quia error commodi ratione dolorem, cupiditate dolor eius nulla atque quidem?
      </p>
    </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

Step-by-step guide on achieving rounded borders with a gap:

Struggling to design blocks and elements with rounded corners that have a gap between the corner and the straight line. It's proving to be quite challenging :) Additionally, I need to create buttons that look like this, and If CSS alone doesn' ...

css

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Is there a reason why the "max-width" property does not seem to have any effect on tables in Internet Explorer 7? While it works fine on other elements, when applied to a table, the max-width rule is completely ignored. <!DOCTYPE html PUBLIC "-//W3C//D ...

htmlcsshtml-table

Optimizing WebGrid Alignment in MVC3 Using RAZOR

I need to customize the width and alignment of each column in a WEBGRID within MVC 3. Specifically, I have 5 columns and I want to set different width and alignment for each header. Here is my code snippet: @{WebGrid grid = new WebGrid(); if (@Model.V ...

cssasp.net-mvc-3webgridrazor-grid

HTML (Bootstrap) alerts do not always fit on a single line

Just recently ventured into the world of HTML/CSS and decided to take on my first website project using Bootstrap. Unfortunately, I've hit a roadblock and can't seem to figure out why the three rows are not aligning properly in one line. The last ...

htmlcsstwitter-bootstrap

a height of 100% with a minimum height of 100%

Is there a way to make the third and fourth rectangles have the same position while filling all the remaining height in %? Keep in mind that we can't change the min-height:100% on the body or html. Feel free to use CSS and HTML for your code solution. ...

htmlcss

Setting up Bootstrap in Laravel 6: A Step-by-Step Guide

When accessing the browser console, an error is displayed: GET http://localhost:8000/asset/app.js net::ERR_ABORTED 404 (Not Found) So I attempted to install Bootstrap following the steps in the documentation. 1. composer require laravel/ui --dev. 2. p ...

phplaravelnpmbootstrap-4

I ran into an issue trying to modify the color and thickness of the divider line in MaterialUI

Check out my code on codesandbox here. I'm trying to adjust the line thickness and color of the separator in my MaterialUI project, but I'm having trouble getting it to work. I've looked at a few examples, but nothing seems to be working for ...

javascriptcssreactjsmaterial-ui

Efficient scripting on Visual Studio

In Visual Studio, a helpful feature is the option box on the left side that allows you to collapse code within curly braces { } using a "-" to minimize and a "+" to expand. This keeps the code organized and clean. I'm curious if there's a way to ...

javascriptcssperformancevisual-studioorganizer

Utilizing the Card-columns feature in Bootstrap

One issue I am currently facing is the way my generated cards appear in the card-columns div: while($row = $categorias->fetch_assoc()) { $imagen = $row["Imagen"]; $categoria = $row["Categoria"]; echo "<div class='card'>"; echo " ...

phphtmlcssbootstrap-4

Position an anchor image at the top left corner, no matter the DTD or browser

Is there a way to keep an image with an href fixed in the top left corner of a webpage without affecting any other content and ensuring it functions consistently across different browsers and DTDs? I am facing the challenge of needing to provide a code bl ...

htmlcss

Add a class if the particular class is missing from the webpage

Seeking a solution in JS, I am facing a challenge in creating a series of elements with active states, each opening a caption below when clicked. Utilizing .addClass, .removeClass, and .toggleClass in combination, only one element can be active at a time. ...

javascriptjqueryhtmlcss

The typical actions of the table elements

When I view my table on large screens, the TH elements are displayed at the top. However, when I switch to a mobile device, these THs move to the left side instead. Is this the default behavior of TH elements in tables? I am utilizing the 'responsive- ...

htmlcssmaterialize

arranging a div after it has undergone rotation

I have an idea to create a div containing three texts, rotate it, and place it in a fixed position on the page. My goal is to make sure it fits perfectly on the screen. To achieve this, I initially created a div with height and width that were the opposit ...

javascripthtmljquerycsspositioning

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

css

Exploring the functionality of the block grid and its purpose within Foundation5

I recently came across Foundation5's Block Grid feature, which seems to have a limited online presence in terms of use cases demonstrating its importance. Unlike Bootstrap3, which does not include Block Grid, I am curious about how significant of a fu ...

csstwitter-bootstrap-3zurb-foundationzurb-foundation-5

Tips for embedding a hyperlink in your HTML website

While I've mastered adding images to my HTML website, there's one thing that still eludes me despite scouring numerous online resources. I recently created a small animation using JavaScript on a different IDE, and I have the link to my output: ...

javascripthtmlcss

Stylish CSS dropdown menu with borders and a subtle shift

I am struggling to create a dropdown menu as shown in this image: Solution for CSS dropdown menu. Unfortunately, my current code is not producing the desired result: Here is my incorrect solution This is the code I am using: .parent-menu li { ...

htmlcssmenunavbardropdown

Display an Asterisk Icon for md-input fields with lengthy labels

Documentation states that md-inputs add an asterisk to the label if it is a required type. However, when input containers have width constraints and long labels, the label gets truncated and the asterisk becomes invisible. From a user experience perspectiv ...

javascripthtmlcssangularjs

first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...

htmlcss