I have navbar
and I wrote the navbar in src/app.component.html
I am using router-link for the page to swap components
for every component I have a different background
if I am using background-image for a component it will not display in the whole page
only in the router-link that is under the navbar
what is the best method to do it?
I thought maybe I should an empty div and set it to display absolute and make the background-image width and height for fullscreen
Basic Solution:
Create an app.service
Create a BehaviourSubject in the service with the default bg image path as initial.
Subscribe to that BehaviorSubject value in the app.component and set the background-image path from this value, you can use the ngStyle directive for this.
ngOnInit of every single navigation component, fire its own bg image path via BehaviorSubject from the app.service.
Working stackblitz example
Related
I created a component in Sitecore Next Js React. The component is basically a full width banner. I need to set an image as the background of the parent dive and this should be editable through the experience editor.
How would I go about doing this in nextjs?
You can make it similarly to react or with Next component.
Place image to public folder and add path to image in background-image property
Import image and place import to background-image property like this:
backgroundImage: url(${bg.src})
Use next/image component. https://nextjs.org/docs/api-reference/next/image
This component make some optimization.
You should place image in src prop like 1 variant or just pass image import, add layout = fill, and position: relative to parent.
Official demo: https://image-component.nextjs.gallery/background
Docs: https://nextjs.org/docs/api-reference/next/image
I am currently building a small web page using react-redux. In my page I am rendering two containers. One container has a button that on clicking causes a change in the state and as a result the content in the other container also changes e.g initially there is a div container with text hello my name is rishi bhatia. As soon as I click on the button the a separate div container with 4 links replaces the previously displayed div container. What are the possible ways in which I can add animations when the content in the container changes. All I am doing is displaying different div containers on state change.
You can implement componentWillReceiveProps(nextProps). Here you can define your animation when component receive props playing with state.
Even if your component is just presentational id doesn't mean it cannot use state for graphical purposes.
i have a Angular 2 project that uses Routes and differents components. one of this components is a login page that don't show any sidebar or footer... So, i need to put ONLY on this page a background (that covers all the body).
I try to use :host {..} but don't work.
How can access to the body background property on this component?
This component is on the same level that app.component.
app.component.html has the and the login component renders here.
Can you help me?
Not sure why you are applying backgorund. If you just want to hide side bar and footer for your login page then you can simply hide them based on your active route using hidden attribute or ngIf directive. Here the refernece for ngIf
It really depends on your login.component.html if :host will work and you didn't show it. You can wrap your login.component.html in a div container and add a class to it for its background color. This one works for me.
<div class="my-container>
<!--your content --!>
</div>
Here's a plunkr for the demo
I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);
I would like to change the bacground image for the preloading bar in Flex, the one which appears before loading your application. This article describes the way in which you can change the background-color, but is there a way to add a background image (and keep the loading bar on top of that)?
I think this is what you're looking for: http://blogagic.com/14/the-blogagic-custom-flex-preloader
The Adibe Cookbook you're linking already contains what you need. For example this recipe answers your question: http://cookbooks.adobe.com/post_Display_your_company_logo_while_you_application_lo-12756.html
Set the backgroundImage style of the application:
Type: Object Format: File CSS Inheritance: no Theme: halo
Background image of a component. This can be an absolute or relative URL or class. You can set either the backgroundColor or the backgroundImage. The background image is displayed on top of the background color. The default value is undefined, meaning "not set".