Im trying to set a static image to be laid out on full height and width of page but it doesn't seem to work, any suggestions ?
Image and code below.
import Image from './image.jpg'
var containerStyle = {
width: "100%",
height: "400px",
backgroundImage: `url(${Image})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
};
export default function Navbar() {
return (
<div>
<img style={containerStyle} />
</div>
);
}
var containerStyle = {
width: "100vw",
height: "100vh",
...
};
Related
I'm having trouble showing an image using div in react js. the path is correct because I can display it using an img tag.
I can't use the import method because the filename is going to be taken from a database table.
this is my code: (Sandbox)
App.js
import "./styles.css";
import Test from "./components/Test";
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Test />
</div>
);
}
./components/Test.js
import img1 from "../assets/images/sandwich.jpg";
const Test = () => {
return (
<div>
<p>This uses the img tag</p>
<img
src={img1}
style={{ width: "100px", height: "100px" }}
alt="an img tag"
/>
<p>And this uses a div with backgroundImage</p>
<div
style={{
backgroundImage: `url("../assets/images/sandwich.jpg")`,
backgroundSize: "cover",
backgroundPosition: "center",
width: "200px",
height: "200px",
border: "1px solid black"
}}
></div>
</div>
);
};
export default Test;
Thank you for giving us a sandbox to test. Was really helpful.
INSTEAD OF WRITING YOUR CODE LIKE THIS:
import img1 from "../assets/images/sandwich.jpg";
const Test = () => {
return (
<div>
<p>This uses the img tag</p>
<img
src={img1}
style={{ width: "100px", height: "100px" }}
alt="an img tag"
/>
<p>And this uses a div with backgroundImage</p>
<div
style={{
backgroundImage: `url("../assets/images/sandwich.jpg")`,
backgroundSize: "cover",
backgroundPosition: "center",
width: "200px",
height: "200px",
border: "1px solid black"
}}
></div>
</div>
);
};
export default Test;
WRITE YOUR CODE LIKE THIS:
import img1 from "../assets/images/sandwich.jpg";
const Test = () => {
return (
<div>
<p>This uses the img tag</p>
<img
src={img1}
style={{ width: "100px", height: "100px" }}
alt="an img tag"
/>
<p>And this uses a div with backgroundImage</p>
<div
style={{
backgroundImage: `url(${img1})`,
backgroundSize: "cover",
backgroundPosition: "center",
width: "200px",
height: "200px",
border: "1px solid black"
}}
></div>
</div>
);
};
export default Test;
The difference is that you don't write your backgroundImage property like this:
backgroundImage: `url("../assets/images/sandwich.jpg")`,
You write it like this:
backgroundImage: `url(${img1})`,
as img1 will contain a react generated link for your image in assets folder you should use img1 as a link in url of the background image as
{
// ...
backgroundImage: `url(${img1})`,
// ...
after watching this video I tried using require like this and it works wonderfully. I hope this can help other people who are stuck with this problem.
const Test = () => {
const img2 = require('../assets/images/sandwich.jpg');
// or if this doesn't work, try adding .default after require
// so it will be require('../assets/images/sandwich.jpg').default
..
<div style={{
backgroundImage:`url(${img2})`
..
I am working on a react project, where I want to conditionally render a div above an existing div that currently covers the screen with an image. I would like the existing div to reduce in height, by shrinking the size of the image, when the second div conditionally renders. The second div can have a varied height. ( e.g. list of items).
This is simplified version of what I have in my App so far:
function App() {
const [show, setShow] = useState(false);
return (
<div
style={{
border: "solid",
width: "100%",
maxHeight: "100vh"
}}
>
{show && (
<div>
<div style={{ height: "300px", backgroundColor: "red" }}></div>
<button
onClick={() => {
setShow(false);
}}
>
Close
</button>
</div>
)}
<div
style={{
display: "flex",
justifyContent: "center"
}}
>
<img
src="https://i.imgur.com/LiAUjYw.png"
alt="test"
style={{
maxWidth: "100%",
height: "auto"
}}
/>
</div>
<button onClick={() => setShow(true)}>SHow</button>
</div>
);
}
It initially looks like this: https://imgur.com/a/R0e74Xk
And on clicking the 'Show' button, it looks like this: https://imgur.com/a/Iy6osio
As you can see the bottom div gets shifted down, and goes over the container div.
I was wondering how I can make the div responsive enough to change its height when the other element is rendered.
I am fairly new to styling so any help on this would be greatly appreciated.
Thank you.
Here's one simple idea. See how the style is given to the divs like so:
<div
style={{
display: "flex",
justifyContent: "center"
}}
>
Note how the style has this weird {{ }} notation. That's because style accepts an object, and the object here is:
{
display: "flex",
justifyContent: "center"
}
You could take that object and save it as a variable somewhere, for example:
const styleWhenShow = {
display: "flex",
justifyContent: "center",
height: "100px"
}
const styleWhenNoShow = {
display: "flex",
justifyContent: "center",
height: "500px"
}
Since you already have your show state, now it's just a matter of replacing the style prop with:
style={show ? styleWhenShow : styleWhenNoShow}
In case you don't want to repeat some common styles between the show and noshow styles, you can also do something like:
const commonStyle = {
display: "flex",
justifyContent: "center"
}
const styleWhenShow = {
height: "100px"
}
const styleWhenNoShow = {
height: "500px"
}
And set the style prop like:
style={show ? { ...commonStyle, ...styleWhenShow } : { ...commonStyle, ...styleWhenNoShow }}
I'm trying to zoom in using the input slider, and I want when content overflows the scrollbar to appear and also position the content to stay centered.
import { useState } from "react";
export default function App() {
const [scale, setScale] = useState(0.3);
const updateScale = (e) => {
setScale(parseFloat(e.target.value));
};
return (
<div style={{
background:"#DE5833",
width:"100%",
height:"100vh"
}}>
<div
style={{
position: "absolute",
zIndex: 50
}}
>
<input
type="range"
min="0.1"
max="1.5"
step="0.01"
value={scale}
onChange={updateScale}
/>
</div>
<div style={{
background:"#DE5833",
width:"100%",
height:"100%",
display:"flex",
justifyContent:"center",
alignItems : "center",
transform: `scale(${scale})`,
}}>
<div
style={{
width: 600,
height: 600,
background:"#2563EB"
}}
>
</div>
</div>
</div>
);
}
This is the example of what behaviour I want to achieve
https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150060/screen-capture_dernvs.mkv
I can center the content , but i can't sroll to the top or to the left like this :
https://res.cloudinary.com/dv8aesvfs/video/upload/v1630150115/screen-capture_1_aas9k8.mkv
you can try it here : codesandbox
I would like to set the background image in my style JS object. For some reason the following is not working, no image appears and no errors?
React
const homeStyle = {
width: '100%',
height: '100vh',
backgroundImage: 'url("../../assets/images/home.png")',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
paddingTop: '160px',
paddingLeft: '400px'
};
<div style={homeStyle}></div>
Any idea's?
try to import the image with
import Background from '../../assets/images/home.png';
and replace the backgroundImage property with
backgroundImage: `url(${Background})`,
Having a React app with this structure:
index.js
...
ReactDOM.render(
<Provider
store=...
>
<BrowserRouter>
<App>
//other components
</App>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
App.js
export default (props) => {
return (
<div style={{ backgroundColor: 'red' }}>
<div
className='container'
style={{
width: '100vw',
height: '100vh',
paddingBottom: '32px',
paddingLeft: '37px',
paddingRight: '37px',
paddingTop: '20px',
backgroundColor: 'green',
}}
>
{props.children}
</div>
</div>
);
};
container class contains:
.container {
height: 100vh;
width: 1100vw;
}
My question is: why isn't the green as big as the red one? (plus/minus padding, doesn't matter)
I tried width: 100%, 100wh, auto, etc. No one worked. I want that element to be as big as its parent.
This is how it looks: https://imgur.com/a/maFt9CV
I put a black rectangle over the app's data because it's not important in this case.
The property you are looking for is vw not wh. So changing width: '100wh' to width: '100vw' should solve your problem.
Your container class is adding a
max-width: 960px
to your green rectangle
You can either remove the container class or add
maxWidth: '100vw'
to the styles of your green div
The width units you are using are not right: try with vw or vh instead of wh.
You can check it at MDN - CSS values and units
Note: I have test it, after you fix de units, and the App.js works