1

I am trying to add a background image for my website in Laravel 9.51.

I've used this in my css file:

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

But it doesn't work. Also tried:

body {
background-image: url({{asset('background.jpg')}});
}

but it doesn't work either. Any ideas? My background picture is stored in public folder. Btw, I can access it from my browser on route: http://127.0.0.1:8000/background.jpg

Myoko
  • 21
  • 3
  • Are you using Vite or Laravel Mix? What error are you getting in the browser console? Are you linking the CSS file to your webpage? – Sanskar Mar 05 '23 at 07:05
  • Css is linked (tried with other styles and it works fine). Browser doesn't show any errors but doesn't display the picture. Inspection doesn't show I've added picture :( Sorry not sure if it is Vite or Laravel Mix, any help how to chek it? – Myoko Mar 05 '23 at 07:19
  • You can check your `package.json` in the root directory to check the bundler you are using. Further, I would suggest is create a reproducible repository on Github or similar app, so we can have more context of what's wrong. – Sanskar Mar 05 '23 at 07:28
  • Thanks Sanskar, I'm using Vite 0.7.2. – Myoko Mar 05 '23 at 07:33

5 Answers5

0

Try with this one

background: url("background.jpg") center center no-repeat;
shakilsinfo
  • 1
  • 3
0
body {

    background:url('url-photo-background');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;

}
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Alireza Mirfakhraei
  • 1
  • 1
  • Thanks, it works, but I' having no problems to add picture off internet. Any ideas how to add it locally? – Myoko Mar 05 '23 at 07:25
  • Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Mar 11 '23 at 00:53
0

You have to enter the photo with the address of the photo that is in the local

body {
    background: url("/images/background.jpg");
}
F. Müller
  • 3,969
  • 8
  • 38
  • 49
Alireza Mirfakhraei
  • 1
  • 1
  • Actually I've stored my pic in public folder, but this worked for me: background-image: url("/background.jpg"); – Myoko Mar 05 '23 at 20:36
0

Actually what worked for me was: background-image: url("/background.jpg"); (picture stored in public folder and I'm using Vite).

Myoko
  • 21
  • 3
0

I don't think css can compile laravel code (I dstand to be corrected), my image is stored in the public folder accessed it with normal file path:

background-image: url("/public/body-background.jpg");

enter image description here

Kanya
  • 26
  • 6