Adjust the background image height to match the height of the viewport

In my Nuxt.js project with Vuetify.js, I am trying to apply a background image to the entire content section:

    <v-content>
      <v-img
        src="https://picsum.photos/id/11/500/300"
      >
        <v-container justify-center fill-height>
          <v-row justify="center" align="center">
            <v-col cols="12">
              <nuxt />
            </v-col>
          </v-row>
        </v-container>
      </v-img>
    </v-content>

However, I am facing an issue where the content is not vertically centered because the image takes up the full height of the window, causing me to scroll down to view the content.

Is there a way to adjust the image's height to match the viewport's height so that the content appears centered vertically without requiring scrolling due to the image?

If the page's content is lengthy, I would like to be able to scroll down while still having the image as the background.

Check out the basic demo code on Github if you have some time to explore it.

javascriptcssvue.jsvuetify.jsnuxt.js

Answer №1

An alternative approach to achieving fullpage background image and vertical alignment without a scrollbar is using CSS instead of vue-javascript. By setting up the following structure, you can achieve the desired result:

UPDATE: Utilize static asset

Include this in your template:

<v-content 
  :style="`background-image: url(${require('../assets/image.jpg')})`" 
  class="fill-height bg-image">
  <v-container justify-center fill-height>
    <v-row justify="center" align="center">
      <v-col cols="12" justify="center" style="border: 1px solid;">
        <nuxt />
      </v-col>
    </v-row>
  </v-container>
</v-content>

Add these styles in your stylesheet:

<style>
 .bg-image {
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   background-size: cover;
 }
</style>

Answer №2

Is the height set to 100vh?

If using vw, it is relative to 1% of the width of the viewport*
If using vh, it is relative to 1% of the height of the viewport*

For more information on CSS units, visit https://www.w3schools.com/cssref/css_units.asp

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

React application encountering issues with the use of Redux actions within a custom module

I have been facing a problem with my util module. It seems that when I try to use a Redux action, it does not function as expected. import {openloading} from '../actions/loading' export default function (e) { openloading(e.font); } Interest ...

javascriptreactjsactionredux

"Consolidating into one large package, Less is compiled and bundled together

Is there a way to display only the CSS being utilized on a webpage after it loads, rather than serving all compiled .less files as one big .css file? In addition, I am interested in having a sourcemap of the .less files shown in the browser for debugging ...

cssless

Discovering the specific value from a fixture file in Cypress

When I receive a JSON Response, how can I extract the "id" value based on a Username search? For instance, how can I retrieve the response with an "id" value of 1 when searching for the name "Leanne Graham"? It is important to note that the response valu ...

javascriptarraysjsoncypress

Deactivate DropDownList within Update Panel with JQuery

Below is the Update Panel that I am working on: <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="d ...

javascriptjqueryasp.net

What is the best way to serve static files using webpack devserver as a proxy?

I have a scenario where my publicPath is set to /static/dist. How can I create a proxy to redirect static/dist to / when my development server is running? I am aware that I can achieve this by checking for the deployment path: let publicPath; if (process. ...

vue.jsserver-side-renderingwebpack-dev-serverprerender

Learn how to easily copy the success result from an Ajax call to your clipboard

Is there a way to use an ajax method to retrieve data from a controller and display it in a JQuery Dialog Box? I want to add a button within the dialog box that allows the user to easily copy the data with a single click, instead of having to manually high ...

javascriptjqueryajaxclipboard

The caching behavior of Vue keep alive does not reset even after the $destroy method is called

Is there a way to selectively remove a component from the keep-alive cache while still keeping it cacheable for the next visit? To test if a component is in the cache, follow these steps: In the app component, click on "goto foo". In the foo component, ...

vue.js

Issue with Jquery .scroll() not functioning in Internet Explorer when using both $(window) and $(document). Possible problem with window.pageYOffset?

Here is the code snippet I am currently struggling with: $(window).scroll(function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = 200; if(y_scroll_pos > scroll_pos_test) { $('.extratext').slideDown(&a ...

javascriptjqueryinternet-explorercross-browser

Is there a way to prevent Webpack file names from constantly changing?

I am completely new to using webpack and I'm trying to figure it out. Currently, I have set up a boilerplate template with vue-cli. When I run npm run build, my files compile to the /dist/build folder and are then split into separate js and css folde ...

phpnode.jswordpresswebpackvue.js

Encounter a critical issue while making a JSON request using Kendo UI

I am facing an issue at my workplace where I need to integrate Angular.js with ASP.NET MVC. Currently, I am trying to build a simple application that features a Kendo UI grid on the front page. In my App.js file, I am fetching data from the Data Controller ...

javascriptangularjsjsonasp.net-mvckendo-grid

using document references in puppeteer's evaluate/waitFor function

I'm feeling a bit lost when it comes to understanding the document reference in puppeteer's evaluate method. The official documentation shows some code that includes this reference within a waitFor function in a node script. I get that these line ...

javascriptnode.jsgoogle-chrome-devtoolspuppeteer

Vue.js: Unable to access property 'includes' as it is undefined

I'm currently in the process of learning Vue.js and working on a simple project. However, I've encountered an issue where, upon clicking the edit button, the previously selected product does not return back. Instead, I receive an error message sa ...

laravelvue.jsnuxt.js

Incorporate additional query parameters into a dynamic route with React Router to enhance functionality

I am currently working on incorporating an optional query parameter to the end of a path in order to create URLs like this: "/user/1/cars?makeYear=2020" or "/user/1/cars". The relevant Route is defined as shown below. I have been having ...

javascriptreactjsreact-routerreact-router-dom

What is the best way to eliminate or substitute Unicode Characters in Node.js 16?

Currently, I have a file that is being read into a JSON Object. { "city": "Delicias", "address": "FRANCISCO DOMÍN\u0002GUEZ 9" } We are using this address to send it to the Google Maps API in order to ...

javascriptnode.jsjson

Discover the process of integrating PWA features into an Express web application

I'm currently in the process of integrating PWA into a web application. I've created a manifest.json file and added it to the head of my page, which is loading correctly. However, the service worker registered in my app.js doesn't seem to be ...

javascriptnode.jsexpressnpmprogressive-web-apps

Angular - Exploring the Dynamic Validation of Multiple Fields Across Components

Currently in the process of developing a classifieds site using Angular. The main component of the route is structured as follows: Contains static fields (name, email, phone, location, etc.) defined in its template Includes a dynamically loaded compo ...

javascriptformsangulartypescript

Encountering a TypeError when attempting to read the property 'name' of undefined while submitting a form in node.js

I'm currently working on a node Js project and I'm encountering an issue while saving form values to a mongoDB database. I've been troubleshooting but can't seem to pinpoint the cause of this error. The error is occurring at the router. ...

javascriptnode.jsformsexpresspost

Interacting with the Chrome Password Storage Menu while leaving the mouse

Implemented an OnMouseLeave property in this menu to automatically close when user moves away from the menu space, which is working well. However, since it's a login form menu, clicking on input fields triggers Chrome's password manager to sugge ...

javascriptreactjs

Utilizing Javascript and HTML5 to upload a .txt file and separate each line into separate input fields

Currently, I am developing an online tool that functions as a database where users can input text data into various fields, save the information in a txt.file, and then retrieve the same data when revisiting the website. I have successfully implemented co ...

javascriptjqueryhtmlline-breaks

Embed array inside angular directive

In my angular application, I have a code snippet that generates a navigation tree within a <div>. The size of this tree depends on the contents of mymodule.tree.folders. To enhance this functionality, I want to create a directive named class="scrolla ...

javascriptangularjsangularjs-directiveangularjs-scope