Background: Cover causing image to be cut off

I'm having trouble trying to display the top part of a background image under my current navigation bar. I've been unable to identify what mistake I may be making here.

Here is my HTML code:

<section class="jumbotron">
    <div class="container">
        <br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.<br><br>.
    </div>
</section>

This is the CSS styling I am using:

.jumbotron {
    background: url("../img/bg.jpg") no-repeat bottom #b1b0b6;
    padding: 10% 2%; 
    margin-top: 5%;
    background-size: cover;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

Currently, it displays like this:

https://i.sstatic.net/z3tJG.jpg

However, the complete image looks like this: https://i.sstatic.net/MLvcy.jpg

You can see a live preview at:

I have tried various options but haven't found a solution yet. Is there a way to fix this issue?

htmlcsstwitter-bootstrap

Answer №1

To display the upper section of the picture beneath the navigation bar, consider implementing this CSS:

.jumbotron{
    background-position-y: 0;
}

background-position-y property defines the initial position of a background image on the y-axis, wishing you find this information useful, thank you.

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

Exploring AngularJS: Retrieving a list of filenames from a specified directory

In the public directory of my application, there is a folder named 'x'. I have the path name to the folder (/path/to/dir/x) but I am unsure of the names of the files within it. How can I retrieve the file names and provide URL links to them in an ...

javascriptjqueryhtmlangularjsmeanjs

Tips on organizing elements

Here are three elements: <!DOCTYPE html> <html lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.boo ...

htmlcsstwitter-bootstrap-3

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

cssreactjsmaterial-uifooter

Ways to verify audio in several HTML5 video files

I am working on a way to determine if multiple videos have audio or not. Here is an example of what I have so far: https://jsfiddle.net/hrd4a0c3/ However, my current solution only checks one video at a time. I am looking for a way to extend this functiona ...

javascripthtmlaudiovideo

Display the actual runtime hyperlink while utilizing the asp tag helper

Whenever I use asp-tag helpers to create a hyperlink, the result is displayed like this: <a asp-page="/demo">Demo</a> The actual html output looks like this: <a href="/test/Demo">Demo</a> However, instead of displaying "Demo" to ...

c#htmlasp.net-core

Activate validation checks when the Div is loaded

I have a situation where I have multiple divs on my page, with only one visible at a time due to the use of an update panel. Within the third div, I need to implement validations using jQuery. <script src="http://ajax.aspnetcdn.com/ajax/jquery.valida ...

jqueryvalidationhtmlonload

Retrieve the selected date from the date picker widget

Welcome to my custom datepicker! Here is the HTML code: <div class="field-birthday field-return" id="birthday-edit" style="display:none;"> <div class="birthdaypicker"></div> <input class="hidden" name="birthday" type="hidden" ...

javascriptjqueryhtmldatepicker

The jQuery scrollTop function seems to be malfunctioning following an ajax request

My ajax call is functioning properly, but I am experiencing an issue with the scrollTo plugin from JQuery. It is not positioning the content where I want it to be located below. //This function reveals the email body when a list item is clicked. jQue ...

jquerycssajaxjquery-ui

Is there a way for me to position my arrow beside the header while still keeping the toggle function intact?

Can anyone assist me in positioning my arrow next to the header text, which I toggle on click? I attempted placing the arrow <div> into the H1 tag, but then the toggle function stops working. Any help would be greatly appreciated! Please includ ...

javascriptjqueryhtmlcss

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

csstwitter-bootstrap-3

Perform a single click and a double click on an anchor element in the document

I am attempting to implement two actions when a user clicks on an anchor tag. The anchor tag will contain a video link. My goal is for the URL to open in a new window when the user single-clicks on the anchor tag, and for the use of the HTML5 download attr ...

javascriptjqueryhtml

Unable to modify the content of a table cell after triggering a Bootstrap modal event

Looking to update values in rows of a table? Here is an example table: I need to update the title per selected row. After selecting the first row, changing the value works fine. However, when I choose the second row, the issue arises where the value from ...

javascriptphpjquerytwitter-bootstrap

substituting symbols with colorful divs

I'm looking to add some color to my text using specific symbols. (), ||, and ++ are the symbols I'm using. If a text is enclosed in | symbols, it will appear in blue, and so on... Here is the code in action: const text = "|Working on the| i ...

javascripthtmlcss

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

Element on webpage "Expands" When Scrolled into Visibility

After posting a question on Stack Overflow, I noticed discrepancies between the element dimensions reported by Chrome Inspector and Selenium WebDriver. While Chrome Inspector showed w = 979, h = 1961, Selenium returned dimensions of 979 and 1461 respective ...

javascripthtmlseleniumselenium-webdriverwebdriver

Navigating on a stationary object: CSS Styling

I have a main div with another nested div inside. The nested div contains cards, but I am unable to scroll through them due to the fixed positioning of the main div. I need a way to enable scrolling for the cards within the nested div. Note that the presen ...

htmlcssreactjs

Tips on adjusting content to match column width in Bootstrap

I currently have the following HTML and CSS: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f7edf5edf1">[email protected]</a>/d ...

htmlbootstrap-4

How can I create a design that adjusts to show 5 columns on larger screens and 2 columns on smaller screens using Bootstrap 4?

I am working on a responsive column layout for an online store. I need to display 5 columns on large screens and 2 columns on mobile screens using Bootstrap4. However, on screens below 576px width, only one column is being rendered instead of two. How ca ...

htmltwitter-bootstrapcssbootstrap-4

Creating a dynamic table in HTML and Angular is a simple process that involves utilizing the

How can I create an HTML table dynamically without knowing the template of each row in advance? Sometimes it may have 2 columns, sometimes 4... I am looking for something like this: <div> <h1>Angular HTML Table Example</h1> < ...

htmlangulartypescript

Minimize the width to display a scrollbar

Check out this page: where you'll find the same code snippet displayed twice - once through GitHub Gist embedding and the second using Jekyll's internal syntax highlighter Rouge. I'm currently working on styling the second code snippet to m ...

htmlcss