I want to add a background image on Facebook's react.js my-app. I can do this by setting a background image to a div element. But my div only covers half of the page. Which is why my image is not fulling occupying the page.
Instead, I want to do this on a body element. But how to add a body element and set a background image to it?
I tried this, but its not working in App.js file of my-app
<body background="http://i.imgur.com/DaNQJ6I.jpg"></body>
[EDITED]
Css-tricks.com provides a quite cool solution of the full page images:
https://css-tricks.com/perfect-full-page-background-image/
I used this example for my React implementation with the useEffect (https://reactjs.org/docs/hooks-effect.html).
Note: background-size replaced by backgroundSize when the style is setted.
import React, { useEffect } from "react";
import img from "./test.jpg";
export default function App() {
useEffect(() => {
document.body.style.background = `url('${img}') no-repeat center center fixed`;
document.body.style.backgroundSize = "cover";
document.body.style.webkitBackgroundSize = "cover";
}, []);
return <div className="App"></div>;
}
Try using style:
<body style={ bodyStyle }></body>
And bodyStyle should look like:
var bodyStyle = { backgroundImage: 'url(http://i.imgur.com/DaNQJ6I.jpg)' };
For some reason, I cannot add a background image on app.js or app.css files of react framework. However, I tried to do it on index.html. This worked perfectly to me.
So, please add background images on index.html If you are unable to do it in app.js or app.css.
And also, future readers, If you have found a way to do it, feel free to answer the question, thanks!!
This works for me. The actual work is done in componentDidMount(). So technically, you could add this on about any component. Like, you could put it on a navbar or even in the layout.
For my projects, I created a component. Add it to your layout (or where ever) and it should work.
Good luck!
export default class BodyStyle extends Component {
componentDidMount() {
const { style } = this.props;
var body = document.getElementsByTagName( "body" )[ 0 ];
for ( var key in style ) {
body.style[ key ] = style[ key ];
}
}
render() {
return <span ref="BodyStyle"/>;
}
};
Related
I'm pretty new to react js and I'm having trouble with a div in a component. For some reason, the CSS just isn't working for it. Please can someone tell me what I'm doing wrong?
export const Main = () => {
return (
<div className = "main">
<h1>SO CHEESY</h1>
</div>
)
}
This is the component named Main.js
.main {
background-color: #161616;
}
This is the style in the index.css file. This isn't exactly what I'm trying to do but this is just an example. Nothing seems to work.
I've tried everything I know. I don't know what's wrong.
Add to the Main.js:
import './index.css';
My app in Ionic 4 but I can’t understand how to customize components.
And i want to display alignment position top right corner.
I have tried in global.css file as well as component.css file , but didn't any luck.
async getNotifications() {
const popover = await this.popoverController.create({
component: NotificationComponent,
// event: ev,
cssClass: 'notificationCSS',
translucent: true
});
return await popover.present();
}
In notificationCSS :
.notificationCSS{
top: 0px !important;
right: 0px !important;
}
Ref. Url
I had a similar problem in ionic for dynamically (maybe not exactly correct in angnular world) rendered html elements. My component css file didn't pick up the classes that I was targetting. However global.css did. I would try put your css in global again.
My goal is to render different pages with different layouts to one div on my index page. The idea is that only one div ("create-focus") changes and I want the other pieces to only have to load once.
This is a proof-of-concept so everything that I am building is local (I have no addresses to redirect to. Only local files to import.)
I have an index.jx as thus:
<div class="col-md-12">
<div id="create-header"></div>
<div id="create-top-banner"></div>
<div id="create-menu"></div>
<div id="create-focus"></div>
<div id="create-footer"></div>
</div>
I would like to replace the id "create-focus" with new html from another jsx :
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./AdBanners.css";
class AdBanners extends Component {
render() {
return (
<div className="AdBannerBody" id="ad-banners" ref={this.myRef}>
<h2>Stuff and Things</h2>
</div>
);
}
}
export default AdBanners;
const wrapper = document.getElementById("create-adBanner");
wrapper ? ReactDOM.render(<AdBanners />, wrapper) : false;
I have tried to load just the html, but it simply prints the code to my screen as text. Do I need to run another render call? How is that possible?
I don't understand very good what you're trying to do, is it to set the inner html of the div "create focus"?
take a look at:
https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
You are misusing ReactDOM.render. The second argument should be a reference to a normal HTML element you want to render your element as the child of. So in your case you would want to call:
ReactDOM.render(<AdBanners />, document.getElementById("create-focus"))
Although I'm not sure this is exactly what you're trying to do. The setup for this app seems very strange to me.
I am using NgStyle to dynamically set the background image of a container in angular 4.
This site: Says the proper syntax is the following
[ngStyle]="{'background-image': venueobject.groupphoto[0]}">
or
[ngStyle]="{'background-image': 'venueobject.groupphoto[0]'}">
I also saw turning the whole thing into a string:
[ngStyle]="'background-image': 'url(' + 'venueobject.groupphoto[0]'+ ')'">
and
[ngStyle]="'background-image: url(' + venueobject.groupphoto[0] + ')'">
but I keep not getting it. The page is rendering so my html is not broken, but the image is not showing.
This is currently not yay and I am trying to make it yay.
Please help me make it yay
Hugs and kisses
You can try the following:
In your ts file:
import { DomSanitizer } from '#angular/platform-browser';
constructor(private sanitizer: DomSanitizer) { }
getBackgroundImg() {
// replace the path to your image here
const img = 'assets/img/wall.png';
const style = `background-image: url(${img})`;
// this is to bypass this warning 'WARNING: sanitizing unsafe style value background-image: url(assets/img/wall.png) (see http://g.co/ng/security#xss)'
return this.sanitizer.bypassSecurityTrustStyle(style);
}
In your html file:
<div [style]="getBackgroundImg()"></div>
You will also need to set the width and height of the div to see the image.
I am using react-boilerplate (3.4.0) with react-router internally for the routing.
I have tried to create a Link with : < a href="#anchor-tag" >< /a >
When I click on it I expect to scroll to the div with id=anchor-tag
It just scroll to the top of the page, even if I use a Link component instead of a < A > tag. Does we have to care about use < A > or < Link > ?
How should we create anchor tag in react-router ?
This might be a while late but what you can do is add this to your component:
import ReactDOM from 'react-dom';
... some more codez...
componentDidUpdate() {
const anchor = this.props.location.hash.replace('#', '');
if (anchor) {
const domElement = ReactDOM.findDOMNode(this.refs[hash]);
if (domElement) {
domElement.scrollIntoView();
}
}
}
and then on your actual element that you want to navigate to, you need to add the ref attribute, like this:
<h1 ref="my-anchor">Hello World</h1>
The link element is going to look just like a regular link:
<a href="/about#my-anchor>Go To Anchor</a>
Or with react-router:
<Link key="my-anchor" to="/about#my-anchor">Go To Anchor</Link>
This works with react-router 2.6.1 - not sure about later versions at this point.
Hope this helps!
Improved answer above:
componentDidMount() {
const anchor = this.props.location.hash;
if (anchor) {
const domElement = document.querySelector(anchor);
if (domElement) {
domElement.scrollIntoView();
}
}
}
I highly recommend to use the package from Rafael Pedicini called react-router-hash-link.
Live example right there. It's working well and the code is clean.