with symphony framework I did dump assets assets:install.
css file is hard copied to /web/bundles/appbundle/css/style.css I guess for background image in css I should have a relative path to reach outside of /web/ folder like this?
background-image: url(../../../../bundles/appbundle/images/top_bg.jpg);
but it doesn't work yet, I have filter='cssrewrite' in css tag too. probably I have to add that I am only editing the css file located at the path above after assets install, I did not edit the one in /Acme/Bundle/Resources/public/css any more. Then I did run assets:dump, now in /web/ folder there are two folders for images and css, I looked at new css and see the path became like this:
background-image: url(../../bundles/applicationadmin/images/top_bg.jpg);
But still all images are broken. I search stackoverflow and found this question, but still have problem. what else should I do?
please advice.
First of all, make sure that your css and images are inside correct folder.
src/AppBundle/Resources/public/css/style.css
src/AppBundle/Resources/public/images/top_bg.jpg
After you run assets assets:install, check if there is a folder on your web directory. It have to be a identical copy from Resources/public.
web/bundles/app/css/style.css
web/bundles/app/images/top_bg.jpg
And your style.css file should look like this:
background-image: url("../../images/top_bg.jpg");
However, if you are configuring the css directly on twig template, the url is different:
<style>
div { background-image: url("/bundles/app/images/top_bg.jpg"); }
</style>
To make it work in twig try this
<div class="container" style="background-image:url('{{ asset('bundles/appbundle/images/top_bg.jpg') }}')"> ,
of course presuming that you have installed the bundle's web assets under a public web directory.
I solve this issue with the following steps:
First let Webpack do his work.
Let's copy all the file to the public/build directory (images and css files)
Next step is to include the css style via twig/smarty in your template
Immediately after the "link" tag, you should open a "script" tag and overwrite all affected styles. In Twig you can work with the "asset" function to load the corresponding URLs from the manifest
i.e:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="{{ asset('/build/css/header.css') }}">
<style >
.header { background-image: url('{{ asset('build/img/logo.png') }}') !important; }
</style>
Your background image is correct changed. The output looks like:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="/build/css/header.5c7b2ca6.css">
<style >
.header { background-image: url('/build/img/logo.bb1272f9.png') !important; }
</style>
This is not the best way to work with Webpack. However, this is an interim solution to refactor outdated code. The next step should be to create entrypoints and build the style using SCSS. Webpack then takes care of the correct use of assets in the styles.
Related
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.
I am allowing users to choose their theme folder /views/theme/images/ theme can be chosen by the user. The css is in the theme folder along with the image folder.
.header {
float:left;
height:100px;
width:100%;
background-image: (/images/bg-nav.png);
}
and I have tried lots of different image paths in the background image but it's not showing I have tried /views/default/images/bg-nav.png, I've added dots, forward slashes etc.
The image does exist in the following folder: /views/default/images/bg-nav.png can someone help me to display and find my image :/
Here's my html css include
<link href="/views/<?php echo $system->theme(); ?>/style.css" rel="stylesheet" type="text/css" />
It is including fine the stylesheet is working
In your example code above:
background-image: (/images/bg-nav.png);
Should be:
background-image: url('/images/bg-nav.png');
You are missing the url. Check the syntax.
Before updating my css, I had the following in Login.css:
body
{
background-image: url('./pictures/fond.png');
background-repeat: repeat-x;
}
Here was my structure:
Now I have the following css:
body
{
background-image: url('../pictures/fond.png');
background-repeat: repeat-x;
}
Please note the double point in the url.
Here is my new structure:
My problem: when publishing on my IIS test server, I cannot see my pictures!? On local dev machine (VS2012) I can see my pictures.
BUT If I update my Login.css located in my IIS test server and replace my double points with a single point it works again. It is not logic because (after my update) the Login.css is now located under the css folder.
Any idea?
Thanks.
UPDATE ----------------
Here is the way I refererence my css:
bundles.Add(new StyleBundle("~/Content/bundleLogin").Include(
"~/Content/css/bootstrap.css",
"~/Content/css/Login.css"));
I created a bundle and then:
#Styles.Render("~/Content/bundleLogin")
I bet you have hardcoded the path to your CSS file in the view, like that:
<link href="Content/css/Login.css" rel="stylesheet" type="text/css" />
instead of doing it the correct waywhich of course is to use an url helper:
<link href="#Url.Content("~/Content/css/Login.css")" rel="stylesheet" type="text/css" />
As far as your CSS file is concerned, all urls that you are referencing there (such as images) are always relative to the current location of the CSS file. So if you properly reference your CSS file you will not have any problems. Using url('../pictures/fond.png'); is the correct relative location.
UPDATE:
Oh, I see the problem. You are using bundles. Well, the problem with bundles is that the way you declared the name of your bundle, you do not have the same level of folder nesting as the physical structure. So modify your bundle like this:
bundles.Add(new StyleBundle("~/Content/css/bundleLogin").Include(
"~/Content/css/bootstrap.css",
"~/Content/css/Login.css"));
and then:
#Styles.Render("~/Content/css/bundleLogin")
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");
Is it possible to enter a base tag/declaration in CSS, something like in HTML?
I need one because I use mod_rewrite and the url looks like that: domain.com/path/to/something/
So my background images aren't loading right (just index/home-page). All I can think of is to add the whole domain (which I have to change every time I update CSS on my webspace) but that I won't like to do.
If you put the CSS in a style sheet, the paths are relative to the location of the style sheet file, not relative to the page.
For example, if you have a style sheet at /css/global.css and an image at /images/logo.gif, you would reference the style sheet from the page like this:
<link rel="stylesheet" type="text/css" href="/css/global.css" />
(Note that you use a path relative to the root, so that it doesn't matter what URL was used to request the page.)
In the style sheet you would use the image like this:
#Logo { background: url(../images/logo.gif); }
Set up a structure something like:
/index.html
/img
/image1.png
/image2.png
/css
/styles.css
Move all your CSS rules into the external styles.css stylesheet.
Now, within the CSS, your image references are relative to the location of the stylesheet - so you can use relative URLs like background-image: url(../img/image1.png);
Finally, make sure that in your HTML code, you use an absolute URL to link your stylesheet - like:
<link type="text/css" rel="stylesheet" href="/css/styles.css" />
Using relative URLs within your CSS means you're free to move your stylesheets and background images into different folders - or even to a different domain or server - whilst the absolute URL /css/styles.css in your HTML LINK tag won't be affected by mod_rewrite or anything else that affects your pages' apparent location on your server.
If you can, you should anchor your URL's so they become root relative:
For instance, change:
background-image: url(images/image.png);
To this:
background-image: url(/images/image.png);
Secondly, even if your CSS was setup as a pure relative path, it is relative to the CSS file not the page (unless you are embedding the CSS in the page).
The CSS is in a file and looks for example like this:
.ui-widget-content { background: black url(images/content.png) repeat-x; }
Structure:
domain.com/folderone/
domain.com/folderone/style/
domain.com/folderone/style/css/
domain.com/folderone/style/css/general.css
And a look on Firebug says that it's trying to load from:
http://domain.com/style/css/images/content.png