Is there a way to adjust the transparency in bootstrap?

Take a look at the edges of the image. I'm attempting to create a background with opacity without affecting the text on top of it. (I want the text to remain fully visible) However, the issue I am facing is that the sides of my image are not displaying with the intended opacity.

.container {
  position: relative;
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  height: 100vh;
  background: rgba(255,255,255,.4)
}

.text-center {
  padding: 50px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="background">
    <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
</div>

htmlcsstwitter-bootstrapbootstrap-4opacity

Answer №1

Consider using d-flex, align-items-center, and justify-content-center classes instead of creating a custom style with text-center. Also, avoid setting a fixed height for the row; let it fill the entire height of the container.

.container {
  position: relative;
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  background: rgba(255, 255, 255, .4)
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row background h-100">
    <div class="col d-flex align-items-center justify-content-center">
      <h1 style="font-size: 350%;"><b>It's Lunch-Time!</b></h1>
    </div>
  </div>
</div>

Answer №2

Never fear, Bootstrap 4 is here

All you need to do is include the classes h-100 for height:100% and px-0 for zero padding on the X axis

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container py-0 h-100">
  <div class="background">
    <h1 style="font-size: 350%;" class="text-center"><b>Time for Lunch!</b></h1>
  </div>
</div>

By the way, feel free to remove the container if you're not using a row, as it may cause overflow issues due to margins

Answer №3

If you wish to utilize the features of bootstrap 4, it is essential to adhere to its guidelines. The rules dictate that the container must enclose the row, and the row must contain the col. By following these specifications, your markup will display as intended.

.container {
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  height: 100vh;
  background: rgba(255,255,255,.4)
}

.text-center {
  padding: 50px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
<div class="row">
  <div class="background col">
    <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </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

Explaining the precise measurements of font size in CSS

I recently started diving into the world of CSS and picked up a copy of Eric Meyer's 3rd edition of CSS: The Definitive Guide. While reading through his section on font sizes (page 107), I came across an interesting concept - that the font size deter ...

cssfonts

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I am trying to display the on and off status based on a scope variable. However, it always shows as off, even when it should be on or checked. In the console window, it shows as checked, but on the toggle button it displays as off Here is the HTML code: ...

javascripthtmlcssangularjstwitter-bootstrap

Struggling to place image behind Bootstrap navbar due to z-index issues

This layout features a navigation bar: <header id="navigation-bar" class="nav-header"> <nav class="navbar navbar-expand-lg"> <a class="navbar-brand" href="#"> <img src="images/logo.svg" alt="logo-icon"> ...

htmlcssbootstrap-4z-indexpositioning

Is it feasible in Vue to import an scss file with deep selectors into the scoped styles of a component?

Is it possible to extract a Vue component's scoped SCSS with deep selectors into a separate file and then import it back in? For example: // Main.vue <template> <div id="main"> <h1>Title</h1> <span>Text< ...

cssvue.js

Extracting pictures from containers for Swing HTML display

Even though I have managed to successfully load images from Jar files for ImageIcons, I am facing issues with finding the right path for images referenced in Swing HTML. This code snippet works when the resources are not bundled into a jar: new JLabel("& ...

javahtmlimageswing

Tips for aligning bootstrap labels in one line while allowing horizontal scrolling within a column in Bootstrap

Check out this code snippet here. <div class="row"> <div class="col-xs-6"> <div class="input-group"> <div type="text" class="form-control"> <span class="label label-default">Default</span> &l ...

htmlcssbootstrap-4

What steps should I take to successfully implement a div ID selector in an HTML document?

<div id="nofries"> <h1 class="restaurant mt-5 ms-3">CRAZY GREEKS</h1> <h3 class="ms-5">GREEK FOOD, SUBS &amp; PIZZA</h3> </div> I'm having trouble with my div ID "nofries" not ...

htmlcssbootstrap-4

Hide sub-strings using CSS display property as none

Is it feasible in CSS alone to conceal certain text within a string? I am aware of attribute selectors such as: [att^=val] - the "begins with" selector For example, given this: <div class="some_random_text"> This is a default text </div> ...

htmlcss

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

Hey there! I am on a mission to determine whether my webpage is being accessed through Samsung's default browser or as a standalone web app saved on the homescreen. Unfortunately, the javascript codes I have come across only seem to work for Safari an ...

javascripthtmlcssweb-applicationssamsung-mobile

Managed the double-click event to select Snap.svg text

I am currently utilizing the snapsvg library for a project where I am implementing the dblclick event to trigger a browser window alert. However, when clicking on the svg canvas, not only does the alert pop up but some text on the canvas also gets selected ...

javascripthtmlevent-handlingdom-eventssnap.svg

Using CSS to style an alternate list elements to float

I'm working on a webpage that displays messages from a database using ajax. Currently, the output is just stacked downwards. I'm hoping to style the list elements to alternate from left to right, similar to an iOS Message chat. Does anyone have ...

htmlcss

The light slider feature is experiencing technical difficulties within the Bootstrap model

I am experiencing an issue with the Light Slider in a Bootstrap modal. Strangely, when I press F12 for inspect element, the Light Slider starts working. For more details and to see the link provided in the comment below, can anyone offer assistance, plea ...

javascriptjquerycss

What is the best way to animate an Svg path up and down?

Move.gif I'm trying to create a vertical animation along this path, but it seems to be moving in different directions. I've been using animationMotion for this purpose. <svg width="698" height="745" viewBox="0 0 698 645" fill="none" xml ...

javascripthtmlreactjsanimationsvg

Troubleshooting Angularjs: Why isn't the HTML displaying the variable value?

Trying to display the value of an AngularJS variable in HTML using this code: <div ng-controller="MyTextbox"> <p>Last update date: {{nodeID1}} </p> Here's my angularjs controller code: angular.module("umbraco").controller("MyTex ...

javascripthtmlangularjsumbraco

Manipulating tables in Vue.js is made easy due to its flexibility. One useful feature is the ability to

I have a dynamic table displaying customers generated using the v-for directive. Each row contains a button that adds the customer ID to an object sent to the API. I want to apply the Bootstrap .success class to only the clicked row, indicating it has been ...

javascripttwitter-bootstrapvue.js

Tips for securing a division's width using the CSS rule "left:100%"

When an absolute position is set with left:100%, the DIV does not maintain its normal width based on content. Instead, the width shrinks by breaking text over spaces. For a quick demonstration, check out this EXAMPLE Is there a way to position an absolut ...

htmlcsscss-positionabsolute

Tips for establishing breakpoints within Material UI grid for achieving responsiveness

I am currently utilizing Material ui's Grid component to organize my user interface elements. Here is the code snippet: <Grid container spacing={3}> <Grid container item xs={12} sm={12} md={12} style={{ marginTop: '-1.5%', marginRi ...

cssgridmaterial-uiresponsive

Creating a visually dynamic stack of images using javascript, jquery, and HTML

I'm interested in creating a unique image viewer using javascript/jQuery/HTML that combines elements of a book page flip and iTunes coverflow, optimized for mobile device browsers. I've been searching for tutorials to help kickstart this project, ...

javascriptjqueryhtmlimagejquery-animate

Inheritance of currentColor in SVG URLs

Seeking the same solution as mentioned in How can an SVG image inherit colors from the HTML document?, specifically when applied to an svg image used as content on a :before pseudo-element. (The intended outcome is for both checkmarks to adopt the red col ...

csssvg

Python Flask form displaying 'None' instead of inputted value

I recently started working on my first Python application and I'm following a tutorial which you can find here. Currently, I'm facing an issue where the information I enter in the form is not displaying correctly on the webpage, specifically for ...

pythonhtmldatabaseformsflask