I want to add a background-image with a laravel URL. I can do this by just including the web path itself but I would like to use Laravel URL.
Here is how I do it now:
.mystyle{
background-image: url("www.myproject.com/assets/img/background.png")
}
Here is how I want it:
.mystyle{
background-image: url("{{ URL::asset('assets/img/background.png }}")
}
Any clues?
You can even use it like this:
.mystyle{
background-image: url("/assets/img/background.png")
}
Put your image into public/assets/img directory and use the asset() helper:
.mystyle{
background-image: url("{{ asset('assets/img/background.png') }}")
}
I have used inline css for a class and this is what actually worked in my case
style=" background-image: url('{{asset('images/cover.jpg')}}');"
This absolutely work
.mystyle {
background-image: url("../assets/img/background.png")
}
If assets is a folder in your public directory then you can write like that
style="background-image: url({{asset('assets/img/background.png')}})"
The best way . Transfer the contents of the css file to blade php file. Then use
background-image: url({{asset('assets/img/background.png')}})"
if you are using new version of Laravel then follow below.
public/img/test.png
if your image exists in the public root dir of the application then you don't need to specify public, you need to put ../ to go one step back and find the image.
background-image: url('../img/test.png');
The way that works for me:
url("../images/formIcons/seeingEye96.png");
in the backgroundi-image add
background-image: url({{asset('assets/img/background.png')}})"
hope after doing this you find the output
Related
I am running ruby 2.3.0 and rail 5.0. When trying to display an background image on a view, I use the following CSS class:
.header_img{
width:100%;
height: 400px;
background: url("../../assets/images/home/home-header.jpg");
}
The image is located in the home subfolder under the image assets folder. I have tried trying to find a solution on here but have not been able to find one that works any help would be awesome.
I am using Rubymine as my IDE and nothing seems to work.
There is no need to provide absolute path as your image is in assests so you can directly do something like this
background-image: url('image.png')
You should have a look at the asset-pipe line, see "2.3.1 CSS and ERB":
http://guides.rubyonrails.org/asset_pipeline.html
The asset pipeline automatically evaluates ERB. This means if you add
an erb extension to a CSS asset (for example, application.css.erb),
then helpers like asset_path are available in your CSS rules:
.class { background-image: url(<%= asset_path 'image.png' %>) }
You can use image_url helper without renaming the file to .erb. You just need to add extension .scss. For eg. main.css.scss and add the line like this:
background-image: image_url('/home/image.png')
I have a similar folder structure to you, and I have used a background image successfully.
Have a try of this code instead and see if it works
background-image:url('/assets/home/home-header.jpg');
Also just for extra, if you want a fixed, non repeating background image that covers the whole page add this css underneath ^that line
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
height:100%;
I am using this approach. Its the best way to include the compiled assets.
.class {
background-image: asset-url('image.png');
}
I think THIS is what he/she was looking for:
<div class="main-banner" style="background-image: url(' <%= polymorphic_url(:image) %>');">
(or whatever your active storage item was called.)
I am trying to add a background using the following, placed inside custom.css:
}
body {
background-image: url("img/background.jpg");
}
custom.css is in folder HTML/css
background.jpg is in folder HTML/img
What should I do so that the background works? Right now it doesn't appear at all.
Go up a level with your URL selector using ..:
background-image: url("../img/background.jpg");
That will go up a level (to the HTML folder) and then find the background.jpg file in the img folder.
It's because your 'img' folder is in a different directory to your 'css' folder.
Try
background-image: url("../img/background.jpg");
Please use :
body{
background-image: url('../img/background.jpg');
}
My css file location htdoc/anyFolder/css/style.css and image folder file location
htdoc/anyFolder/image/search.png. I used background-image rule in css file like background-image: url("/image/search.png");
but i does not find the image. Browser look for http://localhost/image/search.png while it should look for http://localhost/anyFolder/image/search.png. Where is the problem. I tried
background-image: url("../image/search.png");
background-image: url("/../image/search.png");
background-image: url("./../image/search.png");
none of this work. Cannot find where is the problem. Does it depends on where the css file is included.
If your paths are
htdoc/anyFolder/css/style.css and
htdoc/anyFolder/image/search.png
This should work:
background-image: url("../image/search.png");
This should also work:
background-image: url("/anyFolder/image/search.png");
But you say they didn't. You should check if the names of files and folders are correct and also if you have the base element on HTML, because it could change the path where the browser looks for files.
Does it depends on where is include the css file.
Yes. The path to your images is relative to where your css file is.
Just use:
background-image: url("../anyFolder/image/search.png");
Try putting the html and css file in the same folder
Maybe late, but solution is:
bacgkround-image: url(../search.png)
no need for "anyFolder","image"....
I've searched documentation, stack overflow, Google and attempted every CSS variation I could think of and can't determine a way of setting an image as a background to a div or element tag such as body using CSS. Should be simple, right?
Attempts included:
#element { background-image: url(<% asset_path "image.jpg" %>); }
#element { background: url(<% asset_path "image.jpg" %>); }
#element { background-image: url({% asset-path "image.jpg" %}); }
#element { background-image: {% asset-path "image.jpg" %}; }
#element { background-image: url("image.jpg"); }
And many more. Basically, I've tried every possible variation I could think of including many I didn't expect to work ahem, and my efforts to find an answer have been exhausted.
Can somebody with knowledge of Jekyll and Jekyll-Assets clarify for myself and future Jekyll initiates how to accomplish this task?
Try #element { background: url(asset_path("image.jpg")); }. It works for me.
For me, only combination of changing css file extension to css.scss, together with #element { background: url(asset_path("uri/to/file.jpg")); }, necessarily with double quotation marks, worked.
Moreover, sometimes it won't copy the assets, and then I need to jekyll clean and rm -rf .asset-cache.
assets:
cache: false
in _config.yml may help as well.
This works with inline css:
<div style="background-image: url({% asset 1920x1080.jpg #path %})"></div>
I guess I got your problem. If your CSS file is on the root folder of your site you can use this expression
#element { background-image: url(images/image.jpg); }
If its in one folder deep like if the CSS file is in the CSS folder like so _CSS/Style.CSS then you need to change the URL accordingly
#element { background-image: url(../images/image.jpg); }
If its in two folder deep use this expression
#element { background-image: url(../../images/image.jpg); }
I was stumped by this too. I found a solution from the plugin author in one of the repos issues:
Assets processed by jekyll-assets are not passed through normal
StaticFiles process pipeline of Jekyll. Thus they do not process YAML
front matter. Also jekyll-assets are not process files with liquid. If
you need asset_path helper and you don't want to use SASS for example,
you can use ERB. Just rename your styles.css in styles.css.erb and
you'll be able to sue ERB in it:
#header { background-image: url(<%= asset_path "mybackground.png" %>); > }
ERB is a part of Ruby stdlib, so no extra gems are required to
use it. Take a look on jekyll-assets introduction for details about
ERB, SASS in jekyll-assets and so on.
The documentation makes no mention of it, but jekyll-assets (at least version 0.7.7) seems to support the same asset-path helpers as the sass-rails gem:
#element { background-image: url(image-path("image.jpg")); }
or, even more succinctly:
#element { background-image: image-url("image.jpg"); }
Jekyll defaults to _sass when compiling SASS files so if you changed that location of your files which is likely since you are using jekyll-assets then you need to update your _config.yml to use the new location. In the config file add:
sass:
sass_dir: _assets
As per the Jekyll Assets docs, _assets is the default location for jekyll-assets.
For built in SASS support you need to be using Jekyll version 2.0.0 or later.
This should work :)
#element { background-image: url({{ site.url }}/{{ asset-path }}/image.jpg); }
If you do not have a site-url set up
#element { background-image: url({{ asset-path }}/image.jpg); }
or
#element { background-image: url(images/image.jpg); }
I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:
<link href="<%:#Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />
The image I plan to display is in my ~/Content/Images/Designs.png
Here is what I have tried
body
{
background-image: url(~/Content/Images/designs.png);
background-repeat: repeat;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
Other Tries Included:
background-image: url(./Content/Images/designs.png);
background-image: url(Content/Images/designs.png);
background-image: url(Images/designs.png);
none of the above tries worked. What can I do?
The url inside a CSS file is relative to the location of the CSS file.
So if we suppose that you have ~/content/foo.css and you want to include ~/images/foo.png here's how to reference it inside foo.css:
background-image: url(../images/foo.png);
Don't use any ~ inside a CSS file. It has no meaning.
So in your case if the CSS file is ~/Content/Site.css and you want to reference ~/Content/Images/Designs.png the correct syntax is:
background-image: url(images/designs.png);
If this doesn't work for you there might be different causes:
The image doesn't exist at that location
You didn't specify width and height to the containing element so you don't see the image
What I would recommend you is to use FireBug and inspect the corresopnding DOM element to see exactly what styles and images are applied to it.
This is what I had to do:
background-image: url('#Url.Content("~/images/foo.png")')
If you use bundles and have the directory structure like :
-Content
--lightbox
---css
----lightbox.css
---imgages
----close.png
then you can make a separate bundle for content in subdirectories by defining the bundle in that subdirectory:
bundles.Add(new StyleBundle("~/Content/lightbox/css/bundle")
.Include("~/Content/lightbox/css/lightbox.css"));
background-image: url(../images/close.png);
In my case I had to back out to the root and include a path to the Content directory.
So even if my directory structure looked like:
-Content
--css
---site.css
--img
---someImg.png
I couldn't do
background-image: url(../img/someImg.png)
I had to do:
background-image: url(../../Content/img/someImg.png)
This worked locally in debug mode (no minification) and deployed to AWS (with minification) correctly.
Also, don't forget if you're using Bundle minification and you use #import in your CSS to still include the asset in the bundle. For example:
main.css
#import url(../../Content/css/some.css)
Be sure to include some.css in your bundle:
bundles.Add(new StyleBundle("~/Content/global").Include(
"~/Content/css/some.css",
"~/Content/css/main.css"));
No need to do this if you're using LESS or SASS bundlers as the handler knows how to find the files and include them (that's the point!); however, if you're doing it as a straight CSS import, the bundler won't know to include it when it minifies.
Hope this helps someone!
It could be a caching issue in the browser; that is, the browser may cache an older version if the css file. Clear the cache and try again.
use below code
.background
{
background-image: url("../Images/backimage.jpg");
background-position: inherit;
}
Keep it simple stupid.
At all times, try to stick to relative paths with css url attribute.
/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */
background-image: url("Images/YourImageUrl");
The problem with wrong urls is that css can't locate that image as it doesn't understand the convention used on that url, hence the image is not displayed. So to keep it simple use the reigning relative path approach, and you'll never have problems.
For anyone experiencing a similar problem with a razor page.
You can use your regular CSS form, you just need to play with your folder levels.
This avoids having to do CSS inline.
Using normal HTML/CSS
body{background-image: url("images/sparks.jpg");}
My folder structure for razor
body{background-image: url("../../images/sparks.jpg");}
This Works For Me
<div style="background-image:url('/images/home.jpg')">
AS i have images folder direct in my project so
i used in url
/images/image.jpg
like
<div style="background-image:url('/images/image.jpg')">
I would recommend to just drag and drop the image. Visual Studio will generate the code automatically for you,
body
{
background-image: url('../../Content/Images/dark123.jpg');
}
This URL code is auto-generated by Visual Studio you don't need to write the code manually.
Hope this will fix your issue.
Cheers!
Had the same problem. Solved by adding double quotes in the URL specification:
No:
background-image: url(../images/ic_Chevron_bottom.svg);
Yes:
background-image: url("../images/ic_Chevron_bottom.svg");