How can I apply a blurred effect to the background image of a jumbotron in Bootstrap-vue without affecting the clarity of the text overlay

I need help figuring out how to blur the background image of my jumbotron without blurring the text on top.

 <b-container fluid class="text-center">
    <div>
      <b-jumbotron class="jumbotron">
        <p style="font-size: 80px; font-weight: 700">
          Welcome to Janes Electrical
        </p>
        <p style="font-size: 40px; font-weight: 700">
          Home Security and Electrical Experts
        </p>
        <p style="font-size: 40px; font-weight: 700">License number: 905</p>
      </b-jumbotron>
    </div>
</b-container>

This is the CSS I'm using:

.jumbotron {
  color: rgb(255, 255, 255);
  filter: blur(5px);
  padding-top: 200px;
  margin-bottom: 50px;
  height: 500px;
  background-image: url("../assets/Test2.jpeg");
}
cssvue.jsbootstrap-4bootstrap-vue

Answer №1

Utilize the ::after pseudo-element for the .jumbotron class, setting it to full width and height while adding a special effect. By applying a filter directly to the .jumbotron, it will affect all of its child elements.

.jumbotron::after {
  content: '';
  position: absolute;
  filter: blur(5px);
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index: -1;
  background-image: url('https://via.placeholder.com/300');
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130f130e">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<div>
  <div class="jumbotron">
      Your text
  </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

What is the best way to detect a specific button press from an external component?

I need to integrate an external component written in Vue.js that contains multiple buttons. How can I specifically target and capture the click event of a particular button called firstButtonClick() within this external component? Here is how the External ...

javascriptvue.jsvue-component

Tips for deleting "Category: [category name]" in Wordpress

I have attempted various solutions found in previous threads, but none of them seem to work for me. Here is a screenshot I am looking to remove the text from the header in the category and only display [category name]. Can anyone assist me with this, ple ...

phpcsswordpressheadercategories

Is it possible to modify hidden classes within tempus-dominus (datetimepicker) without accessing the source file?

I'm trying to modify the .day class of tempus-dominus (), but even using !important doesn't seem to work when inspecting it (avoid clicking around as the inspection can be strange, and even forcing :hover makes the dropdown disappear). For examp ...

twitter-bootstrapbootstrap-4datetimepickerbootstrap-datetimepickertempus-dominus-datetimepicker

Our website features a dynamic functionality where users can select from two dropdown lists with identical values. Upon selecting multiple values from the first dropdown, the corresponding values in

When selecting multiple values from the first dropdown list, the second dropdown list will automatically have the same value selected as the first dropdown. ...

javascriptjqueryhtmljspbootstrap-4

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

csshtmljinja2templating

Issue with horizontal scrolling in ng-scrollbars occurs when scrolling from right to left

We are currently developing a single page application that supports two languages, one being right to left and the other left to right. For scrolling functionality, we have implemented ng-scrollbars, an Angularjs wrapper for the malihu-custom-scrollbar-pl ...

javascriptjqueryhtmlcssangularjs

The form data for a Laravel Vue.js/Axios PUT request is coming through as empty

I am facing an issue with sending data using axios. When I use a post request to send formdata, the data is successfully sent to the API. However, when I switch to using a put request, it seems that formData is not being properly handled. <template> ...

laravelvue.jsvuejs2vuex

Adjust the Material UI Select component to accommodate the length of the label

Is there a way to automatically adjust the size of Material-UI's Select input based on the label? In the official demo, minWidth is added to the formControl element. However, I have multiple inputs and do not want to set fixed sizes for each one. Whe ...

cssreactjsmaterial-ui

How about placing one element above another? What sets apart using the margin property versus the position property for achieving this effect?

As I pondered the concept of stacking context, a question arose in my mind. Through my readings, I learned that by not applying any CSS properties that create a stacking context (such as position), it is possible to stack elements on top of each other usin ...

csspositioncss-positionmargin

"Scrolling with Bootstrap Scroll Spy is causing incorrect sections to be

Can anyone help me with my issue regarding Bootstrap scrollspy settings? It seems to be highlighting the wrong div id, always the last one. Here is the code snippet: Content: <body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> ...

javascriptjquerycsstwitter-bootstrap

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

Trouble with placing an absolutely positioned element using Tailwindcss

I am currently working on a project using TailwindCSS in which I have a logo positioned to the left and navigation to the right. Both elements are centered, but because the logo has a position of absolute, it appears in front of the navigation. I would lik ...

csstailwind-css

Bring back object categories when pressing the previous button on Firefox

When working with a form, I start off with an input element that has the "unfilled" class. As the user fills out the form, I use dynamic code to remove this class. After the form is submitted, there is a redirect to another page. If I click the "back" ...

javascriptjquerycss

What is the method for showing a value as a decimal in a vuejs input field?

I am encountering an issue where, in a VueJS input field, the decimal places are being stripped from the number 2000.00 that I am trying to display. <div id="app"> <input class="form-control" type="number" ...

vue.jsvuejs2

While using Nav, it is necessary to adjust the height of the drop-down menu to accommodate the content when the sub-menu

My dropdown menu has multiple submenus, and I'm facing an issue where the submenu content overlaps the container when opened. I want the container to scale to the height of the submenu content when opening, and then reduce back when closing the submen ...

htmlcssdropdownbootstrap-5nav

List rendering malfunctioning due to dynamic changes

As a newcomer to VueJS, I could really use some assistance. I've been attempting to showcase a list retrieved from my API. The API functions perfectly, as confirmed through Postman testing. However, when I try to generate a list based on the API resp ...

vue.js

Tips for keeping a div fixed at a specific scroll level

Is there a way to keep a specific side div fixed at a particular scroll level, similar to the "How to format" bar on the right side of the Stack Overflow ask question page? You can see it when you try asking a question. How can this be achieved - with CS ...

jqueryhtmlcss

Tips for Passing Parameters to Vuex mapActions correctly:Executing mapActions in Vuex requires a specific

I am facing an issue with my ProjectPage.vue where I display project issues in a v-data-table. The projects are fetched from a server API call in the sidebar and displayed there. Once I select a project, I want to use its id to retrieve its corresponding i ...

javascriptvue.jsvuejs2vuexvuex-modules

Changing the container's height in an HTML document

enter image description hereim struggling to change the height of the white dash container, and I can't quite figure out how to do it. Here is the code, any help would be appreciated: analytics.html : {% extends 'frontend/base.html' %} {% l ...

pythonhtmlcssdjangoplotly-dash

jQuery for Dynamic CSS Class

Is there a way to apply a different style to a link upon page load with jQuery? I would like the link to appear highlighted when the user navigates to a specific page, such as clicking on the About Us menu item. I want to use jQuery to achieve this effect. ...

phpjqueryhtmlcss