Tips for accommodating several background images to any screen size

I'm currently in the process of developing a website with different background images that change as you scroll down. However, I've encountered an issue where each background image does not completely cover the screen height. In order to make them fit the whole screen, I have to set them to 1100px which results in only part of the image being displayed when scrolling down. My goal is to have the background images fill 100% of the screen height without being cut off or extending beyond the page.

.container {
  background-size: 100%;
  background-size: cover;
  margin-top: 1vh;

}

.parallax {
  background: url("quem-somos.png") ;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.parallax2{
  background: url("servicos.png") no-repeat center;
  background-size: cover;
  height: 1100px;
  width: 100%;
  background-attachment: scroll;
}

.parallax3{
  background: url("depoimentos.png") no-repeat center;
  background-size: cover;
  height: 1100px;
  width: 100%;
  background-attachment: scroll;
}

.parallax4{
  background: url("comecando.png") no-repeat center;
  background-size: cover;
  height: 1100px;
  width: 100%;
  background-attachment: scroll;
}

.parallax5{
  background: url("sac.png") no-repeat center;
  background-size: cover;
  height: 1000px;
  background-attachment: scroll;;
  width: 100%;
}

.parallax6{
  background: url("onde-atuamos.png") no-repeat center;
  background-size: cover;
  background-attachment: scroll;
  height: 1000px;
  width: 100%;
}

All of the images are placed within the container

  <div class="container">
        <div class="parallax" id="about">

            </div>
            <div class="parallax6" id="operations">
            </div>

          <div class="parallax2" id="services">
          </div>

          <div class="parallax3" id="testimonials">
          </div>

          <div class="parallax4" id="getting-started">
          </div>

          <div class="parallax5" id="support">
          </div>
        </div>
htmlcss

Answer №1

To ensure the height of a div matches the screen height, you need to set the min height of html and body to be equivalent to the screen size while also using background-size: cover property. In my example, .image1 and .image2 are directly nested under the body element.

html, body {
        margin: 0;
        width: 100%;
        min-height: 100vh;
    }

    .image1 {
        width: 100%;
        height: 100vh;
        background-color: red;
    }

    .image2 {
        width: 100%;
        height: 100vh;
        background-color: blue;
    }

Answer №2

Utilize os divs filhos para fazer o trabalho pesado, definindo alturas como 100vh - a margem no topo do contêiner.

https://jsfiddle.net/x2h0mat7/

Aqui está um exemplo funcional com o html original:

<div class="container">
    <div class="parallax" id="about">

    </div>
    <div class="parallax6" id="operations">
    </div>

    <div class="parallax2" id="servicos">
    </div>

    <div class="parallax3" id="Depoimentos">
    </div>

    <div class="parallax4" id="Comecando">
    </div>

    <div class="parallax5" id="sac">
    </div>
  </div>

e o css:

.container {

  margin-top: 1vh;
}

.container>div {
  min-height: calc(100vh - 1vh);
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  display: flex;
  overflow: hidden;
  background-attachment: scroll;
}

.parallax {
  background: url("https://via.placeholder.com/1600x1200/0000FF/");
}

.parallax2 {
  background: url("https://via.placeholder.com/1600x1200/990000/") no-repeat center;
}

.parallax3 {
  background: url("https://via.placeholder.com/1600x1200/ffee66/") no-repeat center;
}

.parallax4 {
  background: url("https://via.placeholder.com/1600x1200/66eeff/") no-repeat center;

}

.parallax5 {
  background: url("https://via.placeholder.com/1600x1200/ee66ff/") no-repeat center;
}

.parallax6 {
  background: url("https://via.placeholder.com/1600x1200/ffee66/");

}

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 Bootstrap to create a row of four columns

I am utilizing Bootstrap 4.5.1 to showcase 4 columns, arranged in a row. Here is how my 4 columns are currently displayed: View I would like these 4 columns to be aligned in a single row without wrapping. Below is the code snippet for achieving this: ...

htmlbootstrap-4

Tips for increasing the number of hide/show div toggles with unique classes

I am currently working on a project that involves toggling the visibility of different div classes. The toggle status is saved in local storage to ensure that the setting remains the same even after refreshing the page. Recently, I attempted to create ano ...

javascripthtmljquerycsstoggle

I am currently having issues with a PHP script I wrote for sending email, as it is

After creating a form and implementing a PHP script to send an email upon form submission, I encountered an issue where the "Thank you" message was displayed on a different HTML page, but the email wasn't sent to my account. I uploaded the files to t ...

phphtmlwampserver

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...

cssangularangular-material

Is there a way to manually change the field color upon approval in AngularJS?

Within my application that utilizes the MEAN stack, I am using AngularJS as the front-end technology. How can I manually change the color representation of a tolerance value to 159.06 in a table? Check out my Plunker for more details. Please refer to m ...

htmlcssangularjsmeanjs

<div><!-- including: unknown --></div>

Need some assistance with this issue. The ng-include path I am using is "http://localhost:8080/coffeeprojects/calc.html". I tested the path and it seems to be working. However, despite organizing the files and improving the path as suggested in some resp ...

javascriptjqueryhtmlangularjscoffeescript

How can I make the hover effect only apply to the text and not the entire box?

I'm wondering how I can make the :hover property only affect individual letters in my navigation bar, instead of hovering over the entire box. * { margin: 0px; padding: 0px; } .navigation-bar { height: 3.2em; background: gray; text-align: ...

htmlcsshover

What are the benefits of keeping JavaScript and HTML separate in web development?

Recently, I came across the concept of Unobtrusive JavaScript while researching best practices in the realm of JavaScript. One particular point that grabbed my attention was the idea of separating functionality (the "behavior layer") from a web page's ...

javascripthtmlangularjs

Is there a way to create HTML code from a portion of my Angular2 template?

I am looking for a way to enable my users to easily copy and paste the HTML output of a component template into platforms like MailChimp or their personal website. Similar to how some websites have buttons to generate embeddable iframe codes, I want to pro ...

htmlangular

What is the best way to add an element directly following another within the document's head section?

In my HTML project, I am using JavaScript to insert style elements into the head section. I have implemented a function that should inject styles into a specific id within the head tags. This is a snippet of my current HTML code: function insertAtElemen ...

javascripthtml

dispatching divisional content via email

My form has inputs for a name and email address. Here is the code: <form role="form" method="post" action="email.php"> <input type="text" class="sendmail" name="name" placeholder="Your name" /> <input type="text" class="sendmail" name ...

jqueryhtmlajaxforms

Incorporate the content of an HTML file into a Django template by substituting a portion

I am encountering an issue with replacing a portion of a website that was created using Django with different content. The code snippet in question looks like this: <section id='main_page'> <div id="main_div"> <--! inc ...

pythonhtmldjangodjango-templates

sketch a portion of a picture on a canvas

My challenge involves a canvas with dimensions of 400 by 400, and an image sized at 3392 by 232. I am looking to crop the first 400 pixels of this image and display them within the canvas. How can I achieve this task? $(document).ready(function () { v ...

javascripthtmlcanvas

What steps should be followed to construct a window identical to the one depicted in the attached image using HTML and CSS?

Check out this link to see the window style I'm trying to recreate using HTML, CSS, and Javascript. No Jquery needed. Thank you in advance. ...

javascripthtmlcss

Incorporate external visuals into printed materials

When a page is printed, a heading should be accompanied by an image to the right. I have defined the following stylesheet: @media print { h1::after { content: url( IMAGE_URL_HERE ); position: absolute; top: 0; right: 0; } } The issue ...

cssprinting

What is the best way to display value in a dropdown option field using Laravel?

I am currently working with 3 tables: hosts, visitors, and visitor_types. My objective is to display the host name and visitor type in a drop-down option button. However, I find myself a bit perplexed when it comes to the controller and route code. I have ...

phphtmlcsslaravel-5bootstrap-4

What is the best place in Rails to add @media CSS tags?

Currently, my layout.html.erb contains some CSS rules with @media queries. <style> @media (max-width: 900px) { .green-button{ display: none!important; } .chat_button{ margin-top: 20px!important; } #myCarousel{ ...

cssruby-on-rails

Creating a navbar dropdown that is clickable on mobile devices and opens on hover on desktop is a simple way to improve

Utilizing Bootstrap 5 for my website creation, I am facing an issue with the navbar dropdown functionality. On mobile devices, the dropdown opens upon clicking but fails to close when clicked again. Meanwhile, on desktops, hovering over the dropdown works ...

htmlcssfrontendnavbarbootstrap-5

Send the loop index as a parameter to a function within the onclick attribute of an HTML <input> element using vue.js

My goal was to develop a basic to-do list using vue.js to familiarize myself with it. Now, I've successfully added a remove button next to each item. To achieve this, I included a remove() function in JavaScript with a id parameter, which corresponds ...

javascripthtmlvue.js

Adjusting the position of an iframe with a YouTube video when the window is resized

I'm struggling with resizing and moving a YouTube video embedded using the Youtube API. I'm not a web designer, so I'm facing some difficulties. When trying to resize the window, I can't seem to move or resize the video within an iframe ...

javascriptjqueryhtmliframe