Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area.

Here is a snippet from my global css file:

body {
  font-family: 'Vazir';
  background-image: url("assets/back.jpg");
  background-repeat: repeat-y;
  background-position: center;
  background-size: cover;
}

I also tried creating another css file and linking it in index.html, but that didn't work well either. Even setting the background directly in the body tag of index.html yielded the same result.

PS: I'm looking for a solution that doesn't involve specifying pixels or percentages in the css file.

Thanks for your help!

cssangularbackground-image

Answer №1

To make this happen, follow these steps:

1. Set up a router outlet in the main component (most likely app.component.html)

<div class="outlet-wrapper">
    <router-outlet></router-outlet>
</div>

2. In the corresponding style file (app.component.css/scss), add the following:

.outlet-wrapper {
  background-image: url("assets/back.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

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

CSS transition fails to revert

My standard opacity animation is not working in reverse order. Here is a link to the JSFiddle example. According to the documentation, it should work automatically. Since I am new to JavaScript, I am unsure if this issue lies in my code or if the CSS anima ...

javascripthtmlcss

What is the correct way to superimpose an image with a transparent background?

I am currently working on a mini game that involves overlaying images on camera views. The goal is to have the gun displayed without the background rectangle, as shown in this image: https://i.stack.imgur.com/yU4A2.jpg The code snippet below is relevant ...

htmlcss

Unspecified OrbitControls Compatibility Issue between Angular2 and Three.js

I'm running into issues trying to set up OrbitControls in my Angular2 project. I managed to display a scene with a box, but I'm struggling to move the camera. Upon investigation, I found that my OrbitComponent, responsible for defining orbit con ...

javascriptangularthree.js

Adjusting the characteristics of a class when hovering

Is it possible to change the CSS property of a class when hovering over another class in CSS? #_nav li { display:inline; text-decoration:none; padding-top:5vh; line-height:8vh; margin-right:5vh; cursor:pointer; } #_nav li:hover + ...

jqueryhtmlcsscss-selectors

Explore Angular's ability to transform a nested observable object into a different object

My task involves mapping a field from a sub object in the response JSON to the parent object The response I receive looks like this: { "id": 1, "name": "file-1", "survey": { "identifier": 1, "displayedValue": survey-1 } } I am attempting ...

angulartypescriptrxjs

Angular's HostListener triggers twice when the browser's back button is clicked

In my Angular application, I have implemented a @HostListener that triggers when the back button on the browser is clicked. However, I have noticed that the event handler seems to be firing twice - prompting two dialogue boxes when clicking 'Ok'. ...

angulartypescript

Utilizing a mouse-over script for image popup alignment

I recently came across the mouse over script below on a website, and I must say it works really well and is very easy to use. The only issue I have with it is the placement of the image. Currently, the image follows the cursor as it moves. Question: Is th ...

javascriptjqueryhtmlcss

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Is there a way to make the fixed header responsive to only one scroll bar in JQuery? Specifically, is it possible to have it respond solely to the div's scroll bar and not the browser's scroll bar? I attempted to remove the browser's scroll ...

javascriptjqueryhtmlcssgridview

Chrome Devtool reported an error, but the majority of them are in a null file

Currently grappling with an irksome problem in Vue.js. No matter how hard I try, I just can't seem to pinpoint the error. Even when setting a debugger, all it shows is an empty file. Please take a look at the image provided. Any assistance on identify ...

javascriptreactjsangularvue.jsfrontend

Tips for concealing a tab upon selecting an option from a dropdown menu

<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#song">Song</a></li> <li id="image-tab"><a href="#image" data-toggle="tab">Image</a></li> </ul> <div class="tab-cont ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to show the data returned from service in Angular 2 component

I am facing an issue with my Angular 2 component that calls a service to retrieve data, but the data is not displaying on the HTML page. It seems that the roots array is coming back as a nested array. I have double-checked both the data and the HTML struct ...

c#angularasp.net-web-api

Transform the look of an inactive hyperlink

Can the visual style of an HTML link be modified when it is disabled? For instance, by implementing something like this: a.disabled { color:#050; } <a class="disabled" disabled="disabled" href="#">Testing</a> The code snippet above appears ...

htmlcss

Implementing data binding for arrays of inputs in Angular

Can anyone provide assistance with this code snippet and explain why it is not functioning as expected? I am trying to generate input fields from a string array and bind each input value to its corresponding element in the array. It seems like a common tas ...

arraysangularngmodel

Displaying incorrect results within the div container

I have been developing a website where a div element on a specific page displays values from a PHP file. Below is the PHP code responsible for rendering the information on the HTML: $output .= ' <div class="row text-left col-md-3 ...

phphtmlcss

Angular button will be disabled if the form control is empty

Is there a way to deactivate the search button when the text box is empty? I attempted to use the "disabled" attribute on the search button, but it didn't work. Here is my HTML code: <div class="col-md-5 pl-0"> <div class="in ...

javascriptangular

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

javascripthtmlcss

Surprising <body> body movement caused by child's margin-top pushing it down

Whenever I come across HTML problems, they seem so simple that I almost feel silly asking about them. But here I am, clueless about why this issue is occurring. In the following fiddle http://jsfiddle.net/o5ee1oag/2/, the body is being pushed down by a 50 ...

htmlcssmargin

What is the best way to activate multiple events within an overlapping area containing multiple divs at the same

How can I trigger events on same level divs that overlap in different areas? When there are multiple divs overlapping, only one of them gets triggered. Is there a way to trigger events on all overlapped same level divs? Here is an example code snippet: ...

javascripthtmlcss

Tips on transforming data stored in an array into a nested array structure using Angular 13

Just starting out with Angular and I'm looking to convert my data into a nested array format in Angular 13. If anyone has a StackBlitz example, that would be greatly appreciated! This is the data I've retrieved from a random API: "data& ...

angularmultidimensional-arraynested-loopsangular13angular-loopback

CSS Attribute Selector Wildcard Capture Tool

Suppose I have the following HTML structure: <div class="tocolor-red"> tocolor </div> <div class="tocolor-blue"> tocolor </div> <div class="tocolor-green"> tocolor </div> <div class="tocolor-yellow"> tocolor ...

javascriptcss