LoginSignup
gallantsummerwind
@gallantsummerwind

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Tailwind CSSのbackgroudImageの設定について

Q&A

Closed

CSSReacttailwindbackgroudimage

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

heesukim998
@heesukim998

Divはwidthとheightを決めないと自分の領域を認識しないです。

<div style={{ 
      background: "url(/img/back.jpg) no-repeat",
      width: "1920px",
      height : "2172px"
    }} >

このようにwidthとheightを指定したらできると思います。
また、下にはTailwindのDocumentです。参考になると思います。

2Like
gallantsummerwind
@gallantsummerwind

教えていただいた、widthとheightの設定をすることで反映できました！
また、公式ドキュメントもありがとうございます。
確認して程よいサイズに調整していきます。

0Like

Your answer might help someone💌

LoginSign Up