"Expanding Your Design: Creating A Full-Screen Background Image

Screenshot of site screenshot

Currently, I am a newcomer to the world of coding and working on a project that involves adding a background image. Despite my efforts, I have been unsuccessful in making the background image span the full width of the screen. Since all the images are stored locally on my computer, I decided to provide a screenshot here on Stack Overflow for reference.

I did attempt to add the image as an img element, but faced complications with the bootstrap grid system and z-index. If anyone has a tutorial on this issue, I would greatly appreciate it! For now, I prefer keeping it as a background-image as it seems more manageable for troubleshooting and resizing purposes.

I even experimented with position: absolute; and position: relative;, but unfortunately, it didn't yield any positive results.

* {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  min-width: 100%;
  background-size: cover;
}
... (The rest of the CSS code is untouched) ...

<!DOCTYPE html>
<html lang="eng">

<head>
  ... (The external links and meta tags remain unchanged) ...
  
  <!--title and favicon-->
</head>

<body>
  ... (The HTML structure within the body tag remains unaffected) ...
</body>

Answer №1

It seems like your approach to using bootstrap is a bit off. The .container class ensures that a fixed width is applied and all child elements stay within that width. This means that a fullscreen image cannot exceed the width of the container.

To rectify this, start with the largest element first – the background image in your sectionOne element, then enclose the content with the .container class.

<div class="sectionOne">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h2 class="display-1">Raspberry Pi for Designers</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be surprised what it can do!</h4>
        <button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
      </div>
    </div>
  </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

Footer sidebar of Material Dashboard 2 (free edition) from Innovative Schedule

I noticed in the demonstration of Creative Tim's Material Dashboard 2 (free version) that the sidebar footer takes up a significant amount of space, up to 360px tall. This causes some menu items to be hidden if the browser window is not tall enough. ...

Radio button selection with table layout

I am designing a quiz template with radio buttons. However, I would like them to be stacked vertically instead of side by side. Why doesn't the <br/> tag work? I'm having trouble understanding it. Can someone assist me? Here is my code: ...

Is there a way to determine if a parent of my HTML element possesses a CSS class?

Looking at this HTML code snippet - <div id="parent" class="foo"> <div id="child"> </div> </div> Is there a way to create a test to verify if the child element is utilizing the foo class? I attempted: element .children("#chi ...

Create a Bootstrap layout with three columns and three rows, where the third column has a height

I am trying to achieve a specific layout using the col-lg-4 class. My main goal is to make the third column span across all three rows without creating excessive white space between them. The current layout looks like this: Is it possible to do this in B ...

Centering the date vertically in JQuery Datepicker

I'm currently customizing the appearance of the jQuery datepicker, but I'm facing difficulty in aligning the dates vertically at the center. Here's the progress I've made so far: https://jsfiddle.net/L4vrkpmc/1/ Since the datepicker i ...

When Ruby on Rails is combined with HTML and CSS and marked as selected, it will be displayed with

I'm currently in the process of developing my cookbook app and the next feature on my agenda is the grocery list functionality. Once on the recipe page, users will have the option to click on an "Add to Grocery List" link which will redirect them to a ...

What could be causing my application to not locate the jquery module? ERROR: ENOENT: The specified file or directory cannot be found

I've decided to bring over an Angular project that already has a bootstrap template integrated into my own project. (Still unsure if this was the right move) One of the steps I took was adding these lines to the angular.json file: "styles": [ ...

How can I shift the button's location within a pop-up in Ionic 1?

enter image description here I am struggling to make the button green underneath the three other buttons. Can someone please assist me with this? Here is my code: $scope.showIntroductionPage = function(childs){ if(childs == 0){ var myPopup = $io ...

Showing a generated content before element on a progress bar using the ::before pseudo-class

I'm currently attempting to showcase a ::before pseudo-element on a <progress> bar in the form of a label featuring the value attribute. My current approach successfully displays the ::before element in Brave (v1.61.109), but unfortunately, it d ...

Arranging adjacent div blocks to maintain alignment in a stylish way

I am facing an issue with divs that are placed side by side inside a table. These divs have been styled to appear as colored blocks. Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the en ...

Please disable zoom functionality on the website specifically for Android devices

Is there a way to disable the zoom feature on our website specifically for Android phones/devices without affecting iPhones? Perhaps targeting the Chrome browser on Android would be sufficient, but we should also verify the mobile screen size. ...

dealing with a problem with the bootstrap navigation bar concept

I’ve been struggling to align the menu and company name in a single row. Initially, I tried setting the company name followed by some spaces before adding the menu items, but it didn't work out as expected. I've been spending the last couple of ...

Undetected gap within boundaries

I have a container that contains four div elements. Each inner div has an absolute position and the same size. When I add borders to the inner divs, instead of creating circles, I end up with something that looks like a sliced cake: https://i.sstatic.net/ ...

The SVG image exceeds the boundaries of the parent column div in bootstrap

I am struggling to make a SVG fit inside a column in a bootstrap div with col-lg-4. I tried using img-fluid, but it did not work as expected. The SVG should automatically adjust its size to fit the parent div. However, that is not happening. .star-ratin ...

Why does LESS keep prompting me with missing elements?

I am currently working on my first project using Less and have been following a tutorial closely. However, when I try to compile with lessc, I encounter the following error: ParseError: Unrecognised input. Possibly missing something in C:\Path\t ...

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

I am having an issue where my Bootstrap 4 col-sm-6 rows are not properly stacking on mobile devices

Currently facing issues with Bootstrap 4 as my columns are not stacking on top of each other in mobile view. I have two col-sm-6 within each row. Any guidance on how to resolve this would be greatly appreciated, thank you! Feel free to visit the website a ...

How can I incorporate dashed borders between images using CSS?

New to the world of HTML and CSS, I'm trying to replicate a design I came across online for some practice. The website layout includes images separated by borders, and I'm unsure if this particular design can be achieved using regular CSS alone o ...

Shifting hues with every upward and downward movement

I am experiencing a small issue with this JS code... -I have multiple divs that are changing automatically in rows as they move randomly... I want to change the color of the div moving up to green. And for the div moving down, I want to change the colo ...

Steps for building a Bootstrap grid of thumbnails

I need to display an unknown number of thumbs. Below is a sample of the HTML rendered: <div class="row-fluid"> <ul class="thumbnails"> <li class="span3"> <a href="#" class="thumbnail"> &l ...