Question 44707 in Html Question posted in
Some basic documentation can be found here.

My background image not showing in github pages(tailwind css) – Html

I make a tesla clone with html and taiwind css.It work fine on my live server, but image doesnot show while while deploying it to github page.

The project is given below:
https://github.com/Manikkk3/Tesla-clone-repository

I try changing (./images/…) and (/images/..) but it doesnot work on tailwind.config.js

I try changing (./images/…) and (/images/..) but it doesnot work on tailwind.config.js
I want to display background image.

Tags:

2

Answers


  1. 0

    Try to use a direct URL path for your images in tailwind.config.js file

    /** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./*.html'],
    theme: {
        screens: {
            sm: '480px',
            md: '768px',
            lg: '976px',
            ll: '1177px',
            xl: '1440px',
        },
        extend: {
            backgroundImage: {
                Model3: "url('/images/model-3.jpg')",
                ModelY: "url('/images/model-y.jpg')",
                ModelS: "url('/images/model-s.jpg')",
                ModelX: "url('/images/model-x.jpg')",
                SolarPanels: "url('/images/solarpanels.jpg')",
                SolarRoof: "url('/images/roof.jpg')",
                Accessories: "url('/images/accessories.jpg')",
            },
        },
    },
    plugins: [],
}
    Login or Signup to reply.
  2. 0

    I am not sure if you have found a solution for this problem yet. I recently faced the same problem and after a lot of searching around I found the solution for this in the link. So I am adding the answer here for anyone who might face a similar problem.

    Basically we need to add the path for url relative to the css file (after it is generated). Not relative to the tailwind.config.js file.

    So if the css file is in the build directory like build/css/main.css and images are like so: build/images/model-3.jpg then the path in url would be:
    "url('../images/model-3.jpg')"

    And the tailwind.config.js file would be:

    /** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./*.html'],
    theme: {
        extend: {
            backgroundImage: theme => ({
                'Model3': "url('../images/model-3.jpg')",
                'ModelY': "url('../images/model-y.jpg')",
                'ModelS': "url('../images/model-s.jpg')"
            }),
        },
    },
    plugins: [],
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search