Laravel css background image

добавить фоновое изображение в Laravel 5

Я пытаюсь добавить фоновое изображение для моего сайта в Laravel 5.

Я использовал это в моем файле CSS.

изображение находится в общей папке моей папки проекта Laravel. Я перепробовал все пути, но он просто не загружается.

Я продолжаю получать эту ошибку:

http://Laravelproject.app:8000/background.jpg 404 (Not Found) 

Любая помощь будет оценена. Благодарю.

Решение

Отлично работает с косой чертой:

Другие решения

Возможно, отвечу немного поздно, но сделайте это и надеюсь, что это поможет кому-то там:

Вы должны сначала выйти из CSS, добавив две точки. Здесь я собираюсь показать вам пример, который я только что протестировал и прекрасно работает в Laravel 5.7

1. Создайте новый класс в вашем CSS и назовите его логин тела.
2. Ваш код CSS должен выглядеть следующим образом.

Замечания: будьте осторожны с вашим путем, где изображение существует. В моем случае изображение находится в «public / assets / images / bg.jpg»

так как вы находитесь в css, вам сначала нужно выбраться из него, используя две точки.
URL ( «../ изображений / background.jpg»);

Вы можете использовать этот CSS определенного класса / ID:

selector< background-image: url(<>/public/assets/landing/images/paper.jpg); > 

<> означает базовый URL вашего проекта

попробуйте это, это работает на меня

Источник

Add background to image css laravel code example

So when you get image from css or elsewhere, you should know that the root is public folder. background1.jpg means it is in images folder inside public folder in Laravel.

CSS background image on laravel 5.4 with >

background images are relative to the css file. Ordinarily you would just specify the path like

The above css code works if you are accessing images from public folder like for example

public/ img/ background-header.jpg 

Laravel background image from storage

background-image: url('image) >>'); background-image: url('image>") >>'); 

When using background image and url you’d need to escape the characters using quotes inside the url function and remove brackets inside get method:

Javascript — Trying to add a css background-image, I’m trying to add a CSS background-image property to an element but it keeps adding spaces in my url. I’m building the frontend of an app using a theme, using laravel for the backend. I’m building the frontend of an app using a theme, using laravel for the backend.

Cannot set DIV background to an image. Using Laravel

The resources directory is out of your public directory. Images shouldn’t be stored there.

You could place them in storage and create a symbiotic link with php artisan storage:link .

However, in your case, you should just place them in public/assets/images for your purposes.

Otherwise, utilize something like an S3 bucket or another CDN provider.

Please check your background image path at first & after that you can check with using different image in css.

For an example please check your code by various steps-

header

Note: Please check your image extension & you can use a different image to check your correction

Unless it is a private image, you should put them inside /public directory. It is the root directory in Laravel app. So when you get image from css or elsewhere, you should know that the root is public folder. /images/background1.jpg means it is in images folder inside public folder in Laravel.

CSS background-image property, Definition and Usage. The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Tip: The background of an element is the total size of the element, including padding …

Laravel 5 where to place and how to access image inside css

In CSS you can access images, when they are in public/images, like

In the blade template, you can use something like

public is fine. You should access them in your css file via, e.g., /images/xy.jpg or /assets/images/xy.jpg . The / at the beginning makes sense to refer to the root directory.

If this does not work, please provide paths of images, css and an example css file that does not work with the images.

All files inside of public/ are accessible via web browser, just put the images or css there. Example:

public/images/foo.png public/css/style.css 

Normally in this structure is only needed to do background: url(‘../images/foo.png’) .

However, some people has problems using absolute path like background: url(‘/images/foo.png’) , why? because the laravel installation is made under htdocs/ or public_html/ having the following structure:

/home/user/public_html/laravel/public/ 

If the above structure is used by you, you need background: url(‘/laravel/images/foo.png’)

How To Create a Blurred Background Image, W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

Источник

Set background image css in laravel

First, to give the setup, I have an assets folder, within my public folder, that contains a folder for css called «CSS», a folder for images called «images», and a folder for fonts called «webfonts». Finally, in CSS again, I am trying to use fonts files that I have put in the webfonts folder mentioned above.

Background image doesn’t display in Laravel 8

I want to display the background image of the website which is set by admin and comes from slider table in a database but the image doesn’t display when I call it in CSS code.

But if I call it in tag it works .

PHP code

@php $sliders = App\Models\Slider::find(1); @endphp 

CSS blade code

.page-header < background-image: url (slider_img) >>); position: relative; > 

.page-header < background-image: url ('/slider_img) >>'); position: relative; > 

you forgot the quotes ‘ ‘ before and after the image path.

How to Change a CSS Background Image’s Opacity, opacity is a CSS property that allows you to change the opaqueness of an element. By default, all elements have a value of 1. By changing this value closer to 0, the element will appear more and more transparent. A common use case is using an image as part of the background. Adjusting the opacity can …

CSS Images, Images, and Fonts in Laravel 4 Framework

I am having some trouble with a few things with the Laravel 4 Framework. First, to give the setup, I have an assets folder, within my public folder, that contains a folder for css called «CSS», a folder for images called «images», and a folder for fonts called «webfonts». Here are the paths:

/laravel-master/public/assets/CSS /laravel-master/public/assets/images /laravel-master/public/assets/webfonts 

Inside the CSS folder is my main CSS file, style.css. I am trying to use an image as a background that I call within this CSS file. Here is the code:

Within my view, I call this CSS with the div:

 Both of these result in the page remaining blank. The image is not showing up, and I am not sure why.

On to the next one. Without using CSS, I am just trying to have a simple image show up. I have tried:

All of these result in the broken image symbol. The image is not showing up.

Finally, in CSS again, I am trying to use fonts files that I have put in the webfonts folder mentioned above. However, again the font is not working. I know the CSS file is being uploaded correctly to the page, because the color changes on the text, but the font is not being applied. Here is the CSS:

The view I am using is a blade file (landing.blade.php). This is all on localhost, using MAMP.

Thank you very much for your help with all of this. I am new to Laravel, and I have gotten all of this to work outside of a framework on a live site. Your help is very much appreciated.

I stopped on your first question, first tried solution.

Because if I got it well, your arborescence is like this:

For your second question, try to add a / at the beginning of your URL :

since I believe assets is at the root of your server.

add font face in a main.blade.php:

then in your scss or css use:

then you don´t have problems when public your app

Laravel css set background image url Code Example, laravel 8 css background-image: url. how to add url of image in blade laravel. use img in laravel css url. php image link laravel. link image in laravel. laravel image ur lin css. set background image in laravel in css. image link in …

Set background css image in phpstorm

I have an image that I’d like to set as a background in a Laravel 3 project — background-image: url(«public/img/find-a-table.png»);

But it’s saying «cannot resolve find-a-table.png» in phpStorm even though I definitely have the image file added to that directory.

Do I need to change something to have it find my image in that directory? In any other typical web app, this would be quite trivial to do so I don’t know if I’m missing something.

this site shows I don’t need the quotes around the path? I’ve tried that too but that doesn’t fix it. They use:

background: url(images/bg.jpg) no-repeat center center fixed; without quotes

phpStorm does not tell you, that your browser will not see the given file. It just tells that phpStorm itself does not see the file.

You have to tell phpStorm where the relative path(es) start(s).

To do so, open your project file structure ( cmd + 1 on Mac), right click on your (public accessible) root directory ( public ), then Mark Directory as > and Resource Root . After couple of seconds the error message should disappear.

Keep in mind that image path should be relative to your css, or absolute if it starts with / .

Try this background-image: url(«/img/find-a-table.png»); Or this background-image: url(«../img/find-a-table.png»); if your css folder is alongside img

You probably don’t need public/ in your url. And don’t rely on phpstorm with this, test it in browser.

1- Right-click on your (public accessible root directory) where you’re sourcing the images from.

2- Scroll down to Mark Directory as

3- Choose Resource Root

Had this same error in my WebStorm IDE which was resolved by adding «../» before the path. try this:

background-image: url("../img/find-a-table.png"); 

Html — I can’t set an image for background using css, I have a laravel 5 project where I want to set and custom an image as background, but I simply can’t. I can set the background to a color — that works fine, but not when I’m using an image Here is my code:

Источник