How to add background image to my Front End? #2143

Benrockiee · 2022-08-28T17:40:17Z

Benrockiee
Aug 28, 2022

After lesson 10, i tried to add more features, I'm trying to add a background image to my Front End with Tailwind.css, but what i found online wasnt helping, please how do i go about this?

krakxn · 2022-08-28T17:48:02Z

krakxn
Aug 28, 2022

Via CSS, in your main CSS file:

body {
  background-image: url("xyzlocation");
}

Note: Use a valid URL instead of xyzlocation

8 replies

Benrockiee Aug 28, 2022
Author

unless i can import it inside Index.js

Benrockiee Aug 28, 2022
Author

idk

krakxn Aug 28, 2022

No worries, there are multiple ways to import.

You can also do

import styles from "./css/globals.css";

or rather, if there are conflicts with tailwind, you can just have the body block inside Home.module.css (which you are already importing)

Benrockiee Aug 29, 2022
Author

@krakxn none of these worked

krakxn Aug 29, 2022

What? I cloned the repo and did the same as above, and they added the sample image I had incorporated in the CSS file.

mattjaf · 2022-08-28T22:41:48Z

mattjaf
Aug 28, 2022

you can add them to your public folder, which is your root directory

1 reply

Benrockiee Aug 29, 2022
Author

@mattjaf How

ashrth · 2022-09-04T12:50:32Z

ashrth
Sep 4, 2022

@Benrockiee You can make a component of your background image and add it in index.js like other components, because if you try to include it directly it might give you a Hydration Error.

Or you can try this way:
Add your specifcations in tailwind.config.js, like background image or colors.
Then create one more page named _document.js under pages.

Add this code in _document.js

import Document from "next/document"
import { ServerStyleSheet } from "styled-components"

export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const sheet = new ServerStyleSheet()
        const originalRenderPage = ctx.renderPage

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
                })

            const initialProps = await Document.getInitialProps(ctx)
            return {
                ...initialProps,
                styles: (
                    <>
                    <body className="bg-sky bg-cover"> </body>
                        {initialProps.styles}
                        {sheet.getStyleElement()}
                    </>
                ),
            }
        } finally {
            sheet.seal()
        }
    }
}

Check line number 20, I have added a background color.

Tailwind.config.js file:

module.exports = {
    content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
        colors: {
            sky: "#7dd3fc",
            'white': '#ffffff',
            'purple': '#3f3cbb',
            'midnight': '#121063',
            'metal': '#565584',
            'tahiti': '#3ab7bf',
            'silver': '#ecebff',
            'bubble-gum': '#ff77e9',
            'bermuda': '#78dcca',
            'pink': "#fbcfe8",
            'violet':'#ddd6fe',
        },
    },

    plugins: [],
}

I only added colors, you can add your image, under

0 replies

How to add background image to my Front End? #2143

Uh oh!

Uh oh!

Benrockiee Aug 28, 2022

Replies: 3 comments · 9 replies

Uh oh!

Uh oh!

krakxn Aug 28, 2022

Uh oh!

Benrockiee Aug 28, 2022 Author

Uh oh!

Benrockiee Aug 28, 2022 Author

Uh oh!

Uh oh!

krakxn Aug 28, 2022

Uh oh!

Benrockiee Aug 29, 2022 Author

Uh oh!

krakxn Aug 29, 2022

Uh oh!

mattjaf Aug 28, 2022

Uh oh!

Benrockiee Aug 29, 2022 Author

Uh oh!

Uh oh!

ashrth Sep 4, 2022

Benrockiee
Aug 28, 2022

Replies: 3 comments 9 replies

krakxn
Aug 28, 2022

Benrockiee Aug 28, 2022
Author

Benrockiee Aug 28, 2022
Author

Benrockiee Aug 29, 2022
Author

mattjaf
Aug 28, 2022

Benrockiee Aug 29, 2022
Author

ashrth
Sep 4, 2022