Next.js Discord

Discord Forum

Background Attachment Fixed doesnt work in Image component

Answered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
I want to add background attechment fixed but doesnt work. How can i make it to work?

Code: 
  <Image
            alt=""
            src={servicesBg}
            sizes="100vw"
            style={{
              backgroundAttachment: "fixed",
              objectFit: "cover",
            }}
            fill
          />
Answered by Ojos Azules
Solution:

  <div
            className="absolute top-0 left-0 h-[80vh] w-full"
            style={{
              clipPath: "inset(0 0 0 0)",
            }}
          >
            <div
              style={{
                position: "fixed",
                height: "100%",
                width: "100%",
                left: "0",
                top: "0",
              }}
            >
              <Image
                alt=""
                src={servicesBg}
                layout="fill"
                objectFit="cover"
                quality={100}
              />
            </div>
          </div>
View full answer

11 Replies

@Ojos Azules I want to add background attechment fixed but doesnt work. How can i make it to work? Code: tsx <Image alt="" src={servicesBg} sizes="100vw" style={{ backgroundAttachment: "fixed", objectFit: "cover", }} fill />
Sloth bear
that's because you are not using correct usage. Image tag doesn't support background-specific properties since it's not technically a background image
Also why are you not using tailwind css?
<div className="fixed top-0 left-0 w-full h-screen overflow-hidden">
      <div className="relative w-full h-full">
        <Image
          alt=""
          src={servicesBg}
          layout="fill"
          objectFit="cover"
          quality={100}
          className="!absolute !-z-10"
        />
      </div>
      <h1 className="text-white text-4xl z-10 relative">Text, idk anything</h1>
    </div>
Your* code should be like that if you using tailwind css
@Ojos Azules I want to add background attechment fixed but doesnt work. How can i make it to work? Code: tsx <Image alt="" src={servicesBg} sizes="100vw" style={{ backgroundAttachment: "fixed", objectFit: "cover", }} fill />
Asian black bear
for more info to consider, the css "background-attachment" is used with css "background-image", it is not related to the <Image /> component or <img /> tag
Ojos AzulesOP
Solution:

  <div
            className="absolute top-0 left-0 h-[80vh] w-full"
            style={{
              clipPath: "inset(0 0 0 0)",
            }}
          >
            <div
              style={{
                position: "fixed",
                height: "100%",
                width: "100%",
                left: "0",
                top: "0",
              }}
            >
              <Image
                alt=""
                src={servicesBg}
                layout="fill"
                objectFit="cover"
                quality={100}
              />
            </div>
          </div>
Answer
Just use className and add thé same thing to it instead of using style
Ojos AzulesOP
You have right, i have already changed to tailwind but i forgot to update it here
i copied this code from stackoverflow thats why the "style" thing