Background images

Need help with this
No description
9 Replies
JaViLuMa
JaViLuMaβ€’15mo ago
Don't you miss / in front of images inside url? /images/...
Moni
Moniβ€’15mo ago
tried but did not maken any difference
neal mcguire
neal mcguireβ€’15mo ago
The url needs to be based on the location of the html file. Did you check that?
Chooβ™šπ•‚π•šπ•Ÿπ•˜
The screenshot shows that the images folder is not inside of components. It looks like two levels up, so the url probably should be "../../images/bg-main-desktop.png"
Moni
Moniβ€’15mo ago
but it is in my public folder
Chooβ™šπ•‚π•šπ•Ÿπ•˜
The error message shows that it is looking for the images folder inside of src.
Moni
Moniβ€’15mo ago
whenever i do not use background images it and used simple image using <img> it worked but for background is the only problem
mranxiety.
mranxiety.β€’15mo ago
I found the easiest way to add a background image while using Tailwind is to create a class in your globals.css file and then add that class to your element.
.background-image {
background: url(./assets/DESKTOP-BW.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.background-image {
background: url(./assets/DESKTOP-BW.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
or you could add the image to the Tailwind config file
//tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
}
}
}
}
//tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: {
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
}
}
}
}
I hope this is somewhat usefull or is there a specific reason you need it added in that particular way?
Moni
Moniβ€’15mo ago
thanks
Want results from more Discord servers?
Add your server