ایجاد بکگراند در ری اکت

@mmj.sys

سلام وقت بخیر
مشکلی با style نداره
دو نوع استایل خدمت شما خدمت شما

      <div style={{ backgroundColor: "red" }}>hello</div>

و به این صورت

const styles = {
  backgroundColor: "red"
}
export default function App() {
  return (
    <>
      <div style={styles}>hello</div>
    </>
  );
}

@mohamadshamekhi

سلام ممنونم از پاسختون
اما من میخوام تصویرم رو کل صفحه باشه مشکلم استایل المنت نیست
وقتی رو body اعمال کنم میشه اما میخوام بگکراندم بلور باشه برا همین نمیشه روی body اعمالش کرد
اگر روی روی المنت دیگه ای هم باشه باعث میشه عکس تمام صفحه نشه

@mmj.sys کد هات رو بذار ببینیم

@mmj.sys
بله درسته شما برای این کار هم میتونین برای مثال از یک div جدا توی صفحه استفاده کنین برای مثال با این style

 <div style={{ position: "relative",zIndex:10 }}>
        hello

      </div>
      <div
          style={{
            zIndex:0,
            backgroundColor: "red",
            filter: "blur(50px)",
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          }}
        ></div>

هم میتونین نسبت به با از after یا before استفاده کنین که برای مثال اگر overlay میخواین بدین خیلی بهتره و پیشنهاد من after یا before هستش

اگر هم نه کلا میخواین یه کاره دیگه انجام بدین دقیق تر بگین میخواین چیکار کنین تا بتونم بیشتر راهنمایی کنم

بلور دادن به بک گراند امکان پذیر نیست دوست عزیز
بلور شدن فقط میشه به تگ ها و به عکس داد
به بک گراند نمیشه بلور داد
مگر اینکه برای اون المنت یک before ایجاد کنین
اونو ابسولوت کنین و توی کل کادر مورد نظرتون بکشید
بعد اون بیفور را بلور کنین

@Saeeed

import './App.css';

function App() {
  return (
    <div>
      <div className="header">
        <h1 className="h1">title</h1>
      </div>
     <div
         style={{
           zIndex:-1,
           backgroundImage: "url('http://localhost:8080/rand')",
           filter: "blur(10px)",
           position: "absolute",
           top: 0,
           left: 0,
           width: "100%",
           height: "100%"
         }}
       ></div>
    </div>

  );
}

export default App;

الان این کد به من بلور بکگراند رو میده
اما میخوام
repeat نداشته باشه و فیکس صفحه باشه

سلام
من اصلا ری اکت کار نکردم و بیشتر بک اند کار هستم . اما احتمال میدم این موضوع مشابه css باشه . پس بهتره مقدار background-repeat:no-repeat; رو بهش بدید . حالا هر جوری که باید تو ری اکت نوشته بشه .

@mmj.sys
باید

background-repeat:no-repeat;
background-size:cover:

که هم تکرار نشه هم همه ی صفحه رو بگیره

فیکس صفحه باشه یا فیت؟
اگه فیکس میخوای باشه

position:fixed; 

اسفتاده کن