"Bootstrap - creating a dynamic effect with a repeating pattern overlay and vibrant background color in

I'm having trouble adding a repeating background image to my jumbotron that already has a rebecca-purple background color. I've tried multiple approaches, but can't seem to get it right. Here's the code snippet I'm working with:

.jumbotron {
background-color: rebeccapurple;
color: white;
width: auto;
height: 350px;
margin-bottom: 100px;
position: relative;
display: block;
font-family: FontAwesome;
}

.jumbotron::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(\images\bg_images\maze_white.png) repeat center center;
z-index: -1;
}

Any guidance or suggestions would be greatly appreciated. Thank you.

Answer №1

Your labyrinth is located behind the huge screen because of z-index:-1. To fix this issue, you should switch the backgrounds like demonstrated in this code snippet http://jsbin.com/tekefobive/edit?css,output

.jumbotron {
background-image:url('pattern');
...
}
.jumbotron:after{
background:purple;
z-index:-1;
...
}

Answer №2

// Give this a shot!
.jumbotron {
background: url("IMAGE PATH") rebeccapurple repeat center center;
color: white;
width: auto;
height: 350px;
margin-bottom: 100px;
position: relative;
display: block;
font-family: FontAwesome;

}

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

The lobster custom font is malfunctioning in Internet Explorer

I am trying to use the unique font called lobster. After downloading the lobster.woff2 file, I stored it in the font folder. In my custom CSS, I added the following: @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 40 ...

How can I use JavaScript and HTML to print a canvas that is not within the print boundaries?

As someone who is new to javascript, I recently created a canvas function that allows me to successfully print. However, I am encountering an issue with printing large canvas areas. When I navigate to the further regions of the canvas and try to print, i ...

What is the best way to conceal Bootstrap accordion content when first loading my single-page application?

I am currently developing a single page application for an ESP32 device. I have chosen to keep all the content in one document as there is not a lot of information to display. My approach started with using the collapse class from Bootstrap 4.1.2. While i ...

Leveraging arrays generated from two separate MySQL queries for dual selection functionality with JavaScript

I have successfully populated the first HTML select with results from the first query. Now, I would like to store the results from the second query in either a Json file or XML and then use plain javascript (not jQuery) to populate the second HTML select ...

Aligning SVG clipping path using CSS

This problem has me stumped! I need to center the SVG clip within the surrounding div, just like in this example: http://jsfiddle.net/ztfdv9qh/ - Make sure to check the link because the SVG is quite long! <div class="svg-wrapper"> <div class ...

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

Increasing the nth-child Selector in Jquery

Referring to this I am looking to cycle through the nth-child selector, which involves: var i = 1; var tmp = $(this).find('td:nth-child(i+1)'); // I wonder how this can be achieved i++; I have rows with dynamically generated columns i ...

What sets id and class apart from each other?

I understand that for id we need to use the '#' symbol and for class '.' symbol. However, I am unsure of the specific purposes of both class and id in styling CSS. Can someone provide clarification on when I should use id and when I sho ...

Tips for increasing the height of a div as rows are dynamically added to a table

I am facing an issue with a div main containing a table grid. Rows are dynamically added to the table, causing it to increase in height. However, the height of the div main remains unchanged, resulting in the table overlapping the footer content. What chan ...

Is it feasible to embed an entire linked CSS file within Jade?

I keep getting recommendations from Google's PageSpeed Insights to avoid using links for CSS files and instead include the styles directly under a style tag. I'm wondering if there is a way in Jade to specify a CSS file and have its contents pull ...

Is there a way to streamline the form completion process on my website by utilizing voice commands through the user's microphone?

My webpage features a web form using Flask where users manually input their information that is then added to a table upon submitting. The current setup involves an autoplay video prompting users with questions, which they answer manually and then submit t ...

What is the way to change the background color using HTML5 getItem?

Here is the code I am currently using: $(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;"); When I execute this: alert( localStorage.getItem('bgColorr') + " !important;"); I receive the correc ...

Bespoke Video Player using HTML5 with "Nerdy Stats" Feature

I have been given the task of creating a streaming video testing framework for internal metrics and measurement purposes. Essentially, I am looking to develop an HTML5 player that can handle streams and provide performance data related to: - Average Bitr ...

Incompatible parameter type for the Angular keyvalue pipe: the argument does not match the assigned parameter type

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfo ...

The JavaScript functions are not loading within the onload event handler

I've got an HTML document that contains some Script sections. I've consolidated all the functions within a single Script Tag. Now, I want to be able to utilize these methods in both the onload and onclick events. Below is the HTML file with all t ...

Sass error: Unable to locate the stylesheet for import while trying to import bootstrap

I am currently working on integrating bootstrap into my project directory using npm. Below is an overview of my file structure: https://i.sstatic.net/HjExY.png Within my style.scss file, I am utilizing the @import feature to include Bootstrap as follows: ...

Error with Unexpected Token HTML found in IBM Domino Web application

Currently working on an outdated IBM Lotus Domino web application that does not utilize XPages. The page is consistently encountering HTML errors related to the following line of code: <tr valign="top"><td width="20"><img width="1" height= ...

An issue with JSPDF arises when used on mobile devices

Currently, I am working on a project to create a responsive web application, which involves utilizing JSPDF for generating PDF reports directly from HTML. For a demonstration of the functionality, you can check out this Demo. Unfortunately, when trying t ...

How to smoothly scroll a child div when the parent div is set as position sticky in vue JS

My landing page requires a unique feature: when a user enters a specific <section>, that section should become fixed while the elements inside the corresponding <div> start scrolling. Once the inner div has finished scrolling, the parent <se ...

The Safari browser displays the mobile-friendly version of the website

Everything appears correctly when looking at the website in Firefox and Chrome. However, Safari is displaying the mobile version of the site instead. I did not make any CSS changes specifically for desktop screens while working on the responsive design for ...