Tips for including background pictures in the jumbotron using bootstrap

I've recently delved into bootstrap just a couple of days ago.

Now, I'm encountering an issue where I can't seem to add a background image to my entire webpage or even the jumbotron specifically. I've attempted to directly input the path (both relative and absolute) in the div tag, but to no avail. I've also experimented with CSS, but still haven't managed to display any background image in the output. Can someone please assist me?

My main focus is on having a background image for the jumbotron.

This is the code snippet I have created:

HTML:

<div class="row">
    <div class="jumbotron">
        <div class="container">
            <center>
                <h1>Avudo computers</h1>
                <h5>Redesigning HOPES.</h5>
            </center>
        </div>
    </div>
</div>

CSS:

background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;

Answer №1

It appears that you may have forgotten to define a class/ID in your CSS.

Make sure to include .jumbotron in your CSS styles.

Take a look at the provided example.

body,
html {
  background: url(http://i.telegraph.co.uk/multimedia/archive/02423/london_2423609k.jpg) center center no-repeat;
  background-size: cover;
  height: 100%;
}
div.jumbotron {
  background-image: url(http://placehold.it/1350x550/f00/f00);
  background-position: 0% 25%;
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  text-shadow: black 0.3em 0.3em 0.3em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron">
  <div class="container">
    <center>
      <h1>Avudo computers</h1>
      <h5>Redesigning HOPES.</h5>
    </center>
  </div>
</div>

Answer №2

Give this a shot to apply an image to the entire webpage

html {
    background-image: url(../img/heroimage.jpg);
}

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

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a ti ...

CSS Animation Effect on Transparent PNG Image

Today, while working on my website, an interesting CSS effect came to mind. I vividly remember seeing it a few months ago, but unfortunately, I couldn't find it among my bookmarks. The website featured a captivating design with a prominent logo that ...

The html function does not contain the value of the textarea

While attempting to retrieve the HTML content of a div using the code below, I noticed that it does not include the text entered in the textarea or input field. var mywindow = $(printDiv).html(); The variable mywindow will contain all the HTML except fo ...

New Ways to Style the Final Element in a PHP Array - Part 2

So, here's the current challenge I'm facing along with a detailed explanation of what I'm trying to achieve. Initially, following your suggestions worked smoothly; however, things took a drastic turn when I altered the ORDER BY field and int ...

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

File-loader mistakenly generates 2 images and associates them with the incorrect one

I have encountered an issue with file-loader where it is creating two separate images in my build folder. One image is named correctly and saved in the correct path, while the other one is named [hash].png (default) and is stored directly in the build dire ...

"I'm looking for a way to display the validation summary text in a custom alert using ASP.NET. Can anyone help with

For a recent project at school, I have been tasked with creating an ASP website. One of the features on the login form is several validators and a validation summary. Although the validation summary itself is working correctly, I am looking to extract the ...

Trouble with webpage design persists following recent modifications

Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...

jQuery is unable to locate the FireBreath object

Currently, I am in the process of developing a web video player by using Firebreath to compile my C/C++ codec as a browser plugin. The plugin has been successfully loaded and is functioning properly (start, stop video, etc.). My next goal is to enable full ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

Renaming form elements using JQuery's .load method

This is a page named A.html <form name=form> <input type=text id = txtA> </form> When I use jQuery to load it into B.html, it loads multiple times. <form name=form> <input type=text id = txtA> </form> <form name=f ...

The pure JavaScript function for changing the background color in CSS is not functioning properly

I'm having trouble understanding why the color does not change after clicking. Can anyone explain? function butt(color) { if(document.getElementById("bt").style.backgroundColor=="green"){ document.getElementById("bt").style.backgrou ...

What steps can I take to ensure my CSS component remains unaffected by the global CSS styles?

My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled. The code snippet for impor ...

What is the point of the horizontal scroll bar in WP Thesis?

There seems to be a horizontal scroll bar appearing at the bottom of my site, even though there is no content extending beyond the visible area. Can anyone provide guidance on how to fix this issue? My website is built on Wordpress 3.0 and utilizes the Th ...

Using the position property of relative on a DIV element causes a gap to appear between the DIV and the next

Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them. Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK If you notice, there is a noticeable ga ...

The HTML function transforms blank spaces into the symbol "+"

Just starting out with a question: I created a basic submission form, but I noticed that if there are any spaces in the inputs, the values get changed to a plus sign (+). Here's my form: <form name="input" action="search" method="get"> Web Ad ...

Material-UI elements and reactJS components often clash with one another

I am currently working with a combination of Meterial-UI, ReactJS, and Bootstrap to manage the grid layout on my project. However, I've encountered an issue with material-ui where I'm trying to display 4 text-fields in a single row. Despite my ef ...

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form

I am currently working on a user data collection project that involves filling out multiple forms. Each form has its own dedicated HTML page for personal details, educational details, and more. After entering personal details and clicking next, the data ...