Influence of scoped styles on external webpages

I'm facing an issue with my nuxt app where I have two pages, each with different background styles. However, the background of one page is overriding the other.

index.vue


<style scoped>
body {
  background-color: #ffffff;
}
#banner {
  background-image: url("~assets/img/newbg.png");
}
</style>

login.vue

<style >


body {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9),
      rgba(0, 0, 0, 0.4)
    ),
    url("~assets/img/starter_image.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
}
</style>

It seems that the background styling of login.vue takes precedence over index.vue. When I apply scoped styling to login.vue, it changes the appearance of the entire page.

cssvue.jsnuxt.js

Answer №1

Using the scoped attribute will allow styles to be overridden easily in the parent component.

If you want to change the background in Login.vue, try this:

Within Login.vue

HTML:

<div id="wrapper" v-bind:style="bgc">
    *Insert your HTML code here*
</div>

CSS

#wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #111;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: 0.5s;
}

JS

new Vue({
    el: '#wrapper',
    data: {
        bgc: {
            backgroundColor: ''
        }
    }
})

Answer №2

index.vue

    <style scoped>
    body {
      background-color: #ffffff;
    }
    #banner {
      background-image: url("~assets/img/newbg.png");
    }
    </style>

  login.vue

    <style scoped>

    body {
      background-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.9),
          rgba(0, 0, 0, 0.4)
        ),
        url("~assets/img/starter_image.jpg");
      background-position: center;
      background-size: cover;
      position: relative;
    }
    </style>

Utilizing the scoped attribute allows you to style your component without affecting other components. In this example, we have two distinct components (login, index).

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

Creating unique navigation bar elements

I'm currently working on an application and facing an issue with the navigation from the Component to NavbarComponent. If you'd like to check out the application, you can visit: https://stackblitz.com/github/tsingh38/lastrada The goal is to hav ...

htmlcssangular

I'm feeling a bit lost on where to go next with this JavaScript

I've been working on a project in Python where I need to retrieve a file, store it in an array, and display a random string from the array on HTML. However, I have no experience with JavaScript and am unsure how to proceed. I suspect there may be an i ...

javascripthtmlcss

Is there a method to instruct angular-cli (for angular 2) to produce a minified version of css files?

When running "ng serve" in angular-cli, the generated css is not minified as expected. Is there a specific setting to configure in angular-cli-build or an additional plugin to install? This is the content of my angular-cli-build.js file: var Angular2App ...

cssangularangular-cli

Unable to display menu content text using jQuery

Currently experimenting with jQuery to create a dynamic submenu. The goal is to have a sub menu appear when the main menu is clicked, and then disappear when an item in the sub menu is selected, revealing additional information within a div. Unfortunately, ...

javascriptjqueryhtmlcssmenu

What is the best way to smoothly hide and reveal a flex child element?

I am looking to create a flex container where the child element can smoothly animate to shrink and grow, while the remaining child elements expand to fill in the space. The method I have found involves setting the max-width to 0px and the borders' wi ...

htmlcss

Simple Steps to Connect an HTML File to CSS in Windows Notepad

I have scoured the depths of the online realm in search of a method to connect HTML with CSS within the preinstalled Notepad application on Windows. Regrettably, my attempts, including utilizing the system path, proved fruitless. Is it conceivable to ach ...

htmlcss

What could be causing my CSS formatting from a linked style sheet to not be applied properly?

I've been trying to incorporate a YouTube video into my webpage using a CSS stylesheet, but I can't seem to get the video to display properly .youtube-video iframe, .youtube-video img, .youtube-video-2 iframe, .youtube-video-2 img { positi ...

htmlcssformattinghtml5-video

Issue with Selenium: Unable to select the WebElement

I am a beginner with selenium and I have encountered a problem while trying to click on a specific element using the following locators. Unfortunately, none of them seem to work as expected and my scripts just skip over that particular line without any err ...

javahtmlcssxpathselenium-webdriver

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

javascripthtmlcssreactjsnext.js

Several buttons converging towards a single circle

https://i.sstatic.net/NyHXu.png I attempted to create a circular layout using 6 buttons, but the end result did not form a perfect circle as intended. In the image provided, I highlighted the areas of concern in red. Below, you will find my HTML and CSS c ...

htmlcsstizen

Exploring the semantic-ui dropdown menu feature in Chrome

When I first started learning to code with semantic-ui framework, I noticed a difference in behavior in Chrome compared to other browsers. The pointing menu on the left element (such as the search box) breaks down in Chrome, whereas it displays correctly i ...

htmlcssgoogle-chromemenusemantic-ui

Encountered an issue with trying to access the 'map' property of an undefined value while using Express and VueJS

Currently, I am in the process of developing a fullstack application utilizing Express, VueJS, and Mongoose. The app functions as a news feed platform. A couple of days ago, I encountered an error which was resolved with the help of your guidance. However, ...

javascriptnode.jsexpressvue.jsvue-router

Display or Conceal Sub-Header according to Scrolling Position

Question: My goal is to create a specific animation on my website. When loading the page on mobile, I want to display the div with ID "sub-header", but once the user scrolls more than 50px down, I want to hide it. Additionally, if the user scrolls up by 60 ...

javascriptjqueryhtmlcss

Incomplete filling of the SVG element is observed

Trying to animate SVG text to display only the outer stroke of each letter initially, followed by filling the interior with color. However, after the animation finishes, there are unfilled spaces left. Is there a property that can be applied to the SVG o ...

cssanimationsvg

AdonisJs experiencing issues with web socket.io functionality

Having trouble with Web socket.io in AdonisJs. I have been using a library called adonis5-scheduler to run tasks within Adonis. Shown below is one of my tasks: import { BaseTask } from 'adonis5-scheduler/build' export default class GetRoulette ...

javascriptnode.jsvue.jsnuxt.jsadonis.js

Adjusting cell width based on content in CSS to handle overflows automatically

I am facing a challenge with a table that has varying widths of content in each cell. I need the lengthy content to be displayed next to nowrap and overflow. After trying the solution mentioned here, all cells ended up with the same width. However, I requ ...

htmlcsshtml-tableoverflow

The scroll() function in jQuery does not bubble up

Recently, I encountered an issue with a Wordpress plugin that displays popups on scroll. The code I currently have is as follows: jQuery(window).scroll(function(){ //display popup }); The problem arises with a particular website that has specific CSS ...

javascriptjqueryhtmlcsswordpress

Reimagining scrolling through content with a stylish unordered list (a sleek alternative to a select box

After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heav ...

javascripthtmlcssselectdrop-down-menu

Struggling to remove an image while using the onmouseover event with a button?

I am encountering an issue with hiding an image using the onmouseover event not applied directly to it, but rather to a button element. The desired functionality is for the image to appear when the mouse hovers over and disappear when it moves away. Here&a ...

javascriptjquerycssangularjshtml

Exploring the Power of Vue 3 in Manipulating the DOM

Hello everyone, I am a beginner with Vue and I am interested in learning how to modify the DOM without relying on methods such as document.querySelector or getElementById. Let's take for instance this input: <input id="myInputId" class=& ...

javascriptvue.jsdomvuejs3