I want to add background-gradient on a background image, following is the code I've written for adding background image, but unfortunately, the background image isn't showing. Although I was able to add gradient throught tailwind class bg-gradient-to-r from-slate-400 to-slate-800 but the issue is that I want to add this gradient on the background image.
import React from "react";
export default function HomePage() {
return (
<div className="bg-[url('assets/book.jpg')] min-h-screen flex items-center justify-center">
<h1 className="text-black font-bold text-3xl">Welcome Here</h1>
</div>
);
}
And here is the codesandbox example for the project:
https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js:0-260
Related
I'm exploring Gatsby to make a static website with multiple pages. Those pages will have the same template, just the text will change. To make it easier, I'm going to create a single template. I want to store the content of the different pages (text, path etc.)in Yaml or JSON file. So basically it would look like this :
import React from "react";
import content from '../content/pageContent.yaml'
const Template = () => {
return (
<header className="div1">
<div className="flex items-center justify-center container mx-auto">
<div className="basis-1/2 el tagline">
<h1>{content.title}</h1>
<p>{content.description}</p>
<button>Lets go</button>
</div>
<div className="basis-1/2 el">
<img src=`../images/${pic}`
</div>
</div>
</header>
...
)
}
export template
Here is my pageContent.yaml
title: YAML content used at build time with Gatsby
description: my description with a <b>bold word</b>
pic: mypicture.png
Everything works great but the problem is that it doesn't render the HTML tags. But if I use <h1 dangerouslySetInnerHTML={ {__html: content.titre} }></h1> instead of <h1>{content.title}</h1> it renders the HTML tag.
My question is : is it ok to make it this way? Would it be a better way to do that ?
Thanks a lot
dangerouslySetInnerHTML exposes your app to security risks such as Cross-site scripting XSS attacks.
You could use a library like react-markdown to convert the markdown to html.
Here is an example of how you could do it, adapt as appropriate.
import React from "react";
import content from '../content/pageContent.yaml'
import ReactMarkdown from "react-markdown";
const Template = () => {
return (
<header className="div1">
<div className="flex items-center justify-center container mx-auto">
<div className="basis-1/2 el tagline">
<ReactMarkdown source={content.title} />
<ReactMarkdown source={content.description} />
<button>Lets go</button>
</div>
<div className="basis-1/2 el">
<img src=`../images/${pic}`
</div>
</div>
</header>
...
)
}
export template
i am trying to import a logo but i keep getting this error. the logo is in the assets in my src folder.
import React from 'react';
import {logo} from '../assets'
const Navbar = () => {
return (
<div className='w-full h-[80px] bg-white border-b'>
<div className='max-w-[1480px] m-auto w-full h-full flex justify-between items-center'>
<img src={logo} />
</div>
</div>
)
}
export default Navbar
and the error i get is this. [vite] Internal server error: Failed to resolve import "../assets" from "src\components\Navbar.jsx". Does the file
exist?
i tried using lots of different ways thinking it was a syntax error but nothing worked.
Try with the following line
import logo from '../assets/logo.png'; //change file extension
I'm using model-viewer inside of a Next.js app. Here is what my react component looks like.
The component defaults to 300px and will not fill the div. I have a feeling this has something to do with the render lifecycle of React?
import {useRef, useEffect} from 'react'
import styles from '#/styles/Webxr.module.css'
export function WebXRView(props: any) {
const viewerRef = useRef()
return (
<div className="w-1/2 h-64 bg-gray-200 text-center">
<model-viewer
id="myModelView"
ref={viewerRef}
alt="A 3D model of a chair"
ar ar-modes="webxr scene-viewer quick-look"
ar-scale="auto"
ar-placement="floor"
src={props.objPath}
ios-src={props.objPath}
camera-controls autoplay
alt="A 3D model of a {{model_name}}"
shadow-intensity="1.34" environment-image="legacy">
</model-viewer>
</div>
)
}
The parent component code looks like this
<div className={webxrStyles.mainWebxr} >
<WebXRView
objPath="URL to Object" />
</div>
Here is the mainWebxr style
.mainWebxr {
#apply flex items-center justify-center;
background-color: blue;
min-width:800px;
min-height:600px;
}
I'm busing tailwindcss for my css. So for this I defined the image inside the tailwind config. Then I applied a cover on it but the image doesn't scale when I change the size of the screen. I thought by adding max-w-full min-h-full would fixe the problem but nothing.
import React from 'react'
import { CountdownEvent } from './CountdownEvent'
import { CarouselSaf } from './CarouselSaf'
import { Navbar } from './Navbar'
export const Home = () => {
return (
<section className="h-screen">
<div className="bg-safthon bg-no-repeat bg-cover max-w-full min-h-full">
<Navbar />
<div className="flex h-screen items-center">
<CountdownEvent />
</div>
</div>
</section>
)
}
Try to keep it simple. Check this demo.
<div class="min-h-screen max-h-screen bg-cover bg-center bg-no-repeat"
style="background-image: url('https://i.ytimg.com/vi/odM92ap8_c0/maxresdefault.jpg')">
</div>
I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.
This is my current component's code:
import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'
function Home() {
return (
<div className="">
<Header/>
<div style={{ backgroundImage: `url('${houseImg}')` }} />
<HomePageDescr/>
</div>
);
}
export default Home;
Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.
Anyone encountered the same problem?
Thanks
You need to resize the div. Try setting height and width for the div