What is the best way to display the entire background image in a jumbotron?

After some experimentation, I discovered that by increasing the amount of content I have, it displays the full background image. Is there a clean and efficient way to achieve this?

<div class="jumbotron jumbotron-fluid" style="background: url('./assets/img/mhacks.jpg') no-repeat center center; margin-top: 120px;">
    <div class="container text-sm-center p-t-3">

        <br>
        <br>
        <br>
        <br>
        <p class="lead">Under construction</p>
        <br>
        <br>
        <br>


    </div>
</div>
htmlcsstwitter-bootstrapimage

Answer №1

You can try playing around with the background-size property using either the contain or cover value to see how it affects the image:

.jumbotron.test {
  background: url(http://www.outdoor-photos.com/_photo/4488849.jpg) no-repeat;
  background-size: cover; /*** Experiment with switching between contain and cover when implementing media queries for varied outcomes across different viewports. ***/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="jumbotron jumbotron-fluid test">
    <div class="container text-sm-center p-t-3">
        <br>
        <br>
        <br>
        <br>
        <p class="lead">Under construction</p>
        <br>
        <br>
        <br>


    </div>
</div>

Answer №2

  background-style:  bg-color bg-img placement/bg-dimensions bg-rep; //short

section{
      background-style: #222 url('../image-location.png') no-repeat center top;
      background-dimensions: contain;
    }

Answer №3

Revise your HTML code with the following changes: 

<div class="jumbotron jumbotron-fluid" style="background: url('variable-scope-ruby.jpg') no-repeat center center; margin-top: 120px;">
    <div class="container text-sm-center p-y-3">       
    <p class="lead">Under construction</p>
    </div>
</div>

Additionally, include the following CSS style:

<style>
.lead{
  padding: 30px 0px;
  text-align:center;
}
</style>

Make sure to adjust the padding for .lead based on your specific requirements.

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

Tips for properly aligning numbered lists in text documents

My issue involves designing an order list paragraph where I also need a paragraph in the middle of the ordered list numbers. The first paragraph is displaying correctly, but the second and third paragraphs are only appearing as single lines, so I adjuste ...

html

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...

htmlcss

How can I add a new entry to the MySQL echo database table?

After setting up an echo mysql table for my contacts, I found that I needed a button to add a new contact. I experimented with various solutions and here is what I came up with (all code is within the same file): PHP: //create record if (isset($_POST[&ap ...

phphtmlmysqlsql

Show JSON information from a jQuery post request

Greetings, I am currently working on implementing a login script using Ajax. My objective is to retrieve and display data such as email and username, and then store it in local storage. Although I can successfully obtain the data in JSON format, I want to ...

javascriptphpajaxjsonhtml

The flask application encounters a 404 error when trying to access the favicon.ico file

Upon reviewing my logfile, I noticed numerous entries indicating attempts to load files like /favicon.ico GET - /favicon.ico GET - /apple-touch-icon.png GET - /apple-touch-icon-precomposed.png I have researched this issue extensively online, but have bee ...

htmlbrowserflask

Delivering styled coldfusion outcomes utilising css and jquery

After using jquery to retrieve some data, I've noticed that the results are displayed correctly but the CSS is not being applied. Is there a way to style the results with CSS? function doSearch() { //Making an AJAX call to the server $.ajax({ / ...

jquerycsscoldfusion

Differences between flexible and fixed-width columns in responsive grid layouts

Recently, I've been diving into the world of flexbox and creating my own grid system. Traditionally, when building a grid system using floats, you have to calculate the number of columns per layout and assign percentages for each column's width. ...

cssresponsive-designflexboxgrid-system

Place an animated object in the center with the display style set to

I'm trying to vertically center the second span within my H1. After attempting to change from display: inline-block to display: flex, I found that this causes my animation to start at the beginning of the container rather than in the center. I suspe ...

cssanimationdisplay

Struggling to send data to child components in Vue: Received an object instead of the expected string value of "[object Object]"

My goal is to create a basic To-Do app where, upon clicking the button <b-button v-on:click="newItem" pill variant="primary">Add</b-button>, the input text is displayed below. To achieve this, I am using v-model in the input field (located in ...

javascripthtmlvue.js

show the popover only once the cursor has been hovering for a couple of seconds

Looking to customize the behavior of a bootstrap popover? Here's an example of using the popover to trigger on hover: $("#example").popover({ trigger: "hover" }); However, if you want the popover to appear after a few seconds of hover (e.g. 2 ...

jquerytwitter-bootstrappopover

Utilize Jquery's "find" function to showcase an image

I am attempting to showcase an image using jQuery. I have a function that accepts ID and PATH as parameters. The ID indicates the section (each section is an HTML page that loads upon user action). Additionally, there is a text area where I am displaying t ...

javascriptjqueryhtml

Tips for inserting an image within a horizontal list of items

Struggling to find a solution here. I have a menu with a unique bar design between list elements, featuring breaks at the top and bottom. I attempted to use li:after in the CSS to insert an image, but encountered issues with padding and margin. Below is t ...

htmlcsstwitter-bootstrap-3

Is it possible to achieve the lower link set in a pure CSS horizontal menu where the horizontal link set is positioned below horizontal text tabs?

I am attempting to design a pure CSS on-hover horizontal menu. I have made some progress on my design, as shown in http://jsfiddle.net/dq8z192L/11/ The goal is to have a menu that expands horizontally when hovered over. Each tab reveals a set of links be ...

cssmenumenuitem

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer? I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer. I came across this solution and attempted to implement it by cha ...

htmlcssbootstrap-5bootstrap5-modal

Colored stripe on a horizontal menu

I am attempting to design a page header with a menu that resembles the image provided below. https://i.sstatic.net/623eH.png As I construct the navigation, each link area (highlighted in blue) is represented by an <li>. However, I am encountering a ...

csshtmltwitter-bootstrap-3

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

javascripthtmlqunit

Limit the maximum column gap on the grid and stop it from expanding further

I'm currently facing an issue with some columns/rows on my website that are keeping content locked in the top left corner, reminiscent of early 00's web design. The site was originally designed for smaller screens like 1024x764, so when viewed on ...

htmlcsscss-grid

tips for expanding the size of your images

Hey there, I'm looking for some help with the code below. I need to increase the width of the images and remove the border of the slider div which is currently showing a white border that I want to get rid of. I am using JavaScript to display the imag ...

jqueryhtmlcss

What is the best way to ensure my images are responsive to the varying device sizes when displayed on this website?

In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns: One column will contain text, while the other will display images that complement the textual content. Below is the Bootstrap code snippet for the n ...

htmltwitter-bootstrapcssvuejs2

What is the best way to ensure the height and width of a Next.js image matches the dimensions of the original image?

Currently, I am working on setting up an image gallery with a layout similar to Masonry. This layout involves multiple columns, all with the same width, adjusting based on the viewport width. The height of each item in the gallery is flexible, depending on ...

javascriptreactjsimagenext.js