Divはwidthとheightを決めないと自分の領域を認識しないです。
<div style={{
background: "url(/img/back.jpg) no-repeat",
width: "1920px",
height : "2172px"
}} >
このようにwidthとheightを指定したらできると思います。
また、下にはTailwindのDocumentです。参考になると思います。
2Like
Tailwind CSSのbackgroudImageの設定について
Q&AClosed
ReactでbackgroundImageを設定したのですが、
うまく設定できません。CSSはTailwind CSSとなります。
imgを反映させることはできたのですが、サイズ(wide,height)の変更できません。
以下のままだと、画像の上部の一部分が拡張されてbackgroundに写っています。
理想なのはその画像(1920ピクセル×2172ピクセル)の大きさをそのままbackgroudで使用したいところです。
ご教授のほどよろしくお願いします。
pubic/img/back.jpg
任意のimgが保存されています。
例）
pages/Home.jsx
import React from 'react';
import { Header } from '../components/Heder'
import { Footer } from '../components/Footer'
export const Home = () => {
return (
<div style={{ backgroundImage: "url(/img/back.jpg)" }} >
<Header />
<section class="flex text-5xl">
<h1>Hello</h1>
</section>
<Footer />
</div >
)
}
0
2Answer
教えていただいた、widthとheightの設定をすることで反映できました！
また、公式ドキュメントもありがとうございます。
確認して程よいサイズに調整していきます。
0Like