Can you please help me with why this is not working. I have tried every possible way and still not get why it is not showing on the screen. Only the commented out inside the div work however what i want is a backgroundImage.
import React from "react";
import styles from "./Carosel.module.css";
import legend from "../carousel-photos/legend.jpg";
import legend1 from "../carousel-photos/legend2.jpeg";
function Carousel() {
return (
<div className={styles.carousel}>
<div
className={styles.carouselInner}
styles={{
backgroundImage: `url(${legend})`,
}}
>
{/* <img src={images[0].img} /> */}
</div>
</div>
);
}
export default Carousel;
.carousel {
width: 60%;
height: 700px;
/* background-color: black; */
}
.carouselInner {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
This is how I put my folder directory looks like
Related
I have a simple lightbox component that uses a material-ui modal and has a style sheet. The component and the css look like this.
Lightbox.tsx
import { Modal } from '#material-ui/core';
import { CloseOutlined } from '#material-ui/icons';
import styles from './Lightbox.module.css';
export default function Lightbox(props: any) {
return (
<Modal
className={styles.modal}
open={props.open}
onClose={props.handleClose}
>
<div className={styles.imageContainer}>
<div className={styles.imageToolbar}>
<CloseOutlined
aria-aria-label={props.closeButtonMessage}
className={styles.toolbarButton}
data-cy="lightbox-close"
fontSize="inherit"
onClick={props.handleClose}
role="button"
/>
</div>
<img src={props.url} className={styles.image} title={props.name} />
</div>
</Modal>
);
}
Lightbox.module.css
.modal {
z-index: 2147483640 !important;
}
.imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image {
max-width: 90%;
max-height: 90%;
}
.imageToolbar {
right: 10px;
top: 10px;
position: absolute;
width: 100%;
font-size: 40px;
}
.toolbarButton {
color: #cccc;
cursor: pointer;
float: right;
}
.toolbarButton:hover {
color: #ffff;
}
The component is rendered inside another component like so:
<Lightbox
closeButtonMessage={formatMessage(closeMessageDescriptor)}
url={url}
name={name}
handleOpen={handleOpen}
handleClose={handleClose}
open={open}
/>
When the application is run, the class names are present on the elements however, the styles are missing.
Elements in debugger console: Rendered elements
Rendered CSS for the elements: Style not rendering for the class
What am I doing wrong?
Please note that I need to use CSS style sheet as mentioned in my example and not inline CSS styles.
Since I am new to react, I have tried looking at other components in the project I am currently working on. This method of using CSS style works for other components. Since I am new to React, any help is appreciated.
I am new to react and trying to make a simple component and set its background image using separate css file.
My App.js component:
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<div className="header-img">
{/* <img src={require('./header.jpg')} alt='header-img'/> */}
</div>
</div>
);
}
The CSS file:
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.header-img{
width: 100%;
height: 426px;
margin-top: 50px;
background-image: url('./header.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* background-color: aquamarine; */
}
Here is CodeSandBox link https://codesandbox.io/s/clever-silence-cvhyt?file=/src/styles.css:0-309
Using files through pure CSS will work only on static files, so you need to put your images in the public folder.
That's because React applications that bootstrapped with create-react-app are using webpack for bundling the src folder, accessing a path like './header.jpg' through CSS won't bundle the file.
// public/header1.jpg
.header-img {
background-image: url("./header1.jpg");
}
I have this style:
.album-photos-container {
position: relative;
display: flex;
flex-flow: wrap;
justify-content: center;
.image-card-small {
width: 48%;
margin: 4px;
filter: brightness(0.8);
img {
width: 100%;
height: 100%;
max-height: 400px;
}
}
}
This is what it looks like with images getting distorted.
I read about the display: flex; and flex-flow: wrap; and it looks this is what they do and I need some other approach maybe.
I try to set the max-height: 400px; to a higher value like 2000 then it looks like this:
Please advise: I want images to fill the box no matter how wide or tall the image is!
UPDATE
Here is the component
import React from 'react'
const ClickablePhoto = (props) => {
return (
<div onClick={props.onClick} className="image-card-small">
<img src={props.src} id={props.id} alt="album" />
</div>
)
}
export default ClickablePhoto
And I tried like this:
return (
<div onClick={props.onClick} style={{backgroundImage: 'url(' + require(`${props.src}`) + ') background-size: cover'} } >
<img src={props.src} id={props.id} alt="album" />
</div>
)
But the image src from the props looks like this: /static/media/0_sJ1A5jGwSm66KCdV.e2451a3a.png and background-image: url cant find the image
You can't crop images with <img> element.
You could use div with background-image:
<div class="image" style="background-image: url(...); background-size: cover;" />
I am using mdi-react package and combining it with scss to define some styles but the font-size propert is not working.
Everything else (like color property) is working.
I searched it all over the internet but can't find a solution so finally decided to write my first question on stackoverflow.
And I know I can just use size="8rem" in the icon component itself but I don't want to do that because of some reasons.
Here is my Home.js file:
import React from 'react';
import { Helmet } from 'react-helmet';
import CubeOutlineIcon from 'mdi-react/CubeOutlineIcon';
import { Link } from 'react-router-dom';
const home = () => (
<>
<Helmet><title>Quiz App - Home</title></Helmet>
<div id="home">
<section>
<div>
<CubeOutlineIcon className="cube" />
</div>
<h1>Quiz App</h1>
<div className="play-button-container">
<ul>
<li><Link to="/play/instructions">Play</Link></li>
</ul>
</div>
<div className="auth-container">
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
</section>
</div>
</>
);
export default home;
Here is my home.scss file:
#home {
background-image: url('../../assets/img/bg1.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: space-around;
height: 100vh;
section {
background-color: rgba($color: #000000, $alpha: 0.7);
padding: $normal $md;
height: 80%;
width: 35%;
}
.cube {
font-size: 8rem; //Not working
color: $orange;
}
}
That's because the .cube is actually assigned to an SVG element and that would require you to use height and width to change it's size. Font ain't gonna work hence.
(I'm assuming that you considered it to be a font-icon or so as the color property got applied to it, but it did so cos fill is set as currentColor, which uses the current text-color.)
According to docs, to change the size of the icon you should use the size property.
Check the following link:
https://github.com/levrik/mdi-react#usage
so i'm in the process of learning react and to do so i'm trying to convert my personal webpage to use it.. But i've hit a wall. Before I had a background image on my home page that took up 100% width and 80% height. But when I try to do that in react it's not showing my image. Here is my code.
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
margin: 0;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url('../images/haha.jpg');
min-height: 80%;
}
#homeTest {
white-space:nowrap;
}
and on the react side i'm just doing:
import React from 'react';
import ReactDOM from 'react-dom';
import './css/w3.css';
import './css/landing.css'
class Landing extends React.Component {
render() {
return (
<div className="bgimg-1" id="home">
<div id="homeText">
<h1>David Dennis <small>Im here to create meaningful and lasting software</small>
<a href="https://www.youtube.com/channel/UCun833t1bRiYlpoRAkg0S1g?view_as=subscriber">
<button class="btn draw-border" >Subscribe on YouTube</button></a></h1>
</div>
</div>
);
}
}