The site I work on has a lot of images that contain text. This includes buttons and navigation.
To support localization I include 2 css-files. One that has non language specific properties (font, colour ...) and one that has language specific properties. There is only 1 language specific file served to the user depending on his choosen language.
The language specific file (/content/en/Site.css , /content/de/Site.css ..) has information about background images
div.topHeader p#searchHeader
{
background: url(/images/de/headers/search_lo.gif) no-repeat scroll center center;
}
This works smoothly but I will have a lot of duplicate code. In english the css will be:
div.topHeader p#searchHeader
{
background: url(/images/en/headers/search_lo.gif) no-repeat scroll center center;
}
I will have a couple of languages thats why it would realy pay out to optimize this. Is there a better way to do this?
Just extract out only language specific part from the main CSS to a new CSS for each language and include that CSS in your page dynamically. In this way do don't have to manage lots of CSS classes.
You can try consolidating all external graphics references in separate CSS and referencing it separately in your code.
If you mean form paths in your CSS dynamically, well, you could write a handler to process this particular request for your CSS, read it on the server-side from the file, replacing all language marker parts as required (document.Replace("{lang}", "de")) and then serve the modified CSS back. But it would require some work.
Rather than having different CSS files for each language you could one file, site.css.aspx or similar and process the file, output the paths based on the language supplied POST/GET variables or in the accept headers.
See similar question here
For a start you could use background-image instead of background to save repeating the repeat, positioning, scrolling and colour information.
To really optimise it I would simply dynamically serve the css based on the user's localisation. eg: through a php script or something. You could just do something like background-image: url(/images/<?=$lang ?>/headers/search_lo.gif).
not sure but u can have something like this ,
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__en.gif) no-repeat scroll center center; }
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__de.gif) no-repeat scroll center center; }
where last word after __(dauble underscore) will added dynamically
as
div.topHeader p#searchHeader {
background: url(/images/headers/search_lo__{%lang%}.gif) no-repeat scroll center center; }
An easy solution would be to apply a class or ID to the body tag in the HTML based on their locale. Then in the stylesheet you could do something like:
div.topHeader p#searchHeader
{
background: no-repeat scroll center center;
}
body.en div.topHeader p#searchHeader
{
background-image: url(/images/en/headers/search_lo.gif);
}
body.de div.topHeader p#searchHeader
{
background-image: url(/images/de/headers/search_lo.gif);
}
There's still going to be a bit of duplication, but you've reduced the amount of CSS you have to write for each localisation.
You can create dynamic CSS with PHP or similar. Here's a PHP example:
index.html:
<link rel="stylesheet" type="text/css" media="screen" href="style.php">
style.php:
<?php
header("Content-type: text/css");
$lang = $_SESSION['however_you_are_detecting_lang'];
?>
body {
background-image:url(images/<?=$lang?>/image.png);
}
that will fetch images/en/image.png or images/de/image.png
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 would like to know how can I edit CSS files(ex:Logo size, Logo path)
I am using Grantry v4.1.24 and Joomla 3.3.1
See the example of how to change Logo;
#rt-logo {
background: url("/qatarclean/joomla_gantry/images/logo.png") no-repeat scroll 50% 0 transparent !important;
}
#rt-logo {
height: 140px;
width: 267px;
}
How can I find the CSS location for this and how to edit this?
in Firebug it is only showing the only the folder path.
I have created gantry-custom.css file and inserted above data. It doesn't work.
See the attached picture;
Also I want to know how to remove some lines from selected CSS file;
Thanks in Advance,
Sameera Silva
The Gantry Framework uses compiled LESS files. Rather than editing these directly, it is recommended (as you have done) that a custom CSS or custom LESS file is created so that your changes are not overwritten by a template update.
The use of !important might be the reason your override is not working.
You can get around this using CSS specificity as explained by Henning on the RocketTheme Forums at: http://www.rockettheme.com/forum/configuration-and-security/209832-want-nail-how-2use-template-name-custom-css-file-correctly#1028846
For more information on CSS specificity Henning recommends: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know
In this particular case, the following should fix the issue you are having:
div#rt-logo {
background: url("/qatarclean/joomla-gantry/images/logodf.png") no-repeat scroll 50% 0 transparent !important;
}
I am working on an app using Bootstrap as the framework in Rails (bootstrap-sass). What I want to do is add a sweet background image but I can't seem to override the white background of the body no matter what I try.
Has anyone had success with this? What do I have to change or add to get this to happen?
In addition to trying other things, I have even tried wrapping all the contents in the body in a div with an id, then calling that class in the custom css.scss file where I have successfully customized other aspects of Bootstrap.
The code I added using the id:
html body #bgimage {
background-image: image-url('/images/cityscape.jpg');
}
Edit:
I just checked the errors in the development local server and I have this: ActionController::RoutingError (No route matches [GET] "/assets/images/cityscape.jpg"):
/Edit
Thanks!
There was a similar discusion recently, the problem was that background-image oddly does not work with bootstrap. Try:
html body #bgimage {
background: url('cityscape.jpg');
}
Notice, that asset-pipeline does its work for finding the proper location of your file, so you don't have to mention the path.
If your cityscape.png is in assets/images/ directory, please use the following:
html body #bgimage {
background-image: url(image_path('cityscape.jpg'));
}
And to use your original source, you have to remove /images/ from your image-url as:
html body #bgimage {
background-image: image-url('cityscape.jpg');
}
I already tried many different approaches and none work, am I missing something here?
This is what I have tried...
th a.asc {
background-image: url(up_arrow.gif);
}
th a.desc {
background-image: url(down_arrow.gif);
}
and
th a.asc {
background-image: url("assets/up_arrow.gif");
}
th a.desc {
background-image: url("assets/down_arrow.gif");
}
and
th a.asc {
background-image: url(assets/up_arrow.gif);
}
th a.desc {
background-image: url(assets/down_arrow.gif);
}
and
th a.asc {
background-image: url(<%= asset_path "up_arrow.gif" %>);
}
th a.desc {
background-image: url(<%= asset_path "down_arrow.gif" %>);
}
and...
th a.asc {
background-image: asset-url("up_arrow.gif", image);
}
th a.desc {
background-image: asset-url("down_arrow.gif", image);
}
and many more.
I have renamed the file application.css, application.css.scss, application.css.erb, application.scc.scss.erb, index.css, index.css.scss, index.css.erb
I have read this... http://edgeguides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets and 404 when displaying background image in CSS with rails 3.2 and Rails 3.1 serving images from vendor/assets/images and Rails 3.1 and Image Assets and other pages from stackoverflow.
But my images don't appear. They are in the app/assets/images directory. I have double checked and triple checked and yes, they are in that location. I go to Inspect Element in Google Chrome and when I click in the images link, it shows me the broken link image.
Your last example using asset-url should work, assuming a few things...
The asset pipeline is actually enabled (in config/application.rb look for config.assets.enabled = true)
You have sass-rails is in your Gemfile
If sass-rails is part of a group in your Gemfile (say, the :assets group), you have to make sure that group of gems is being loaded by Bundler in your development environment. In your config/application.rb you should see something like this:
if defined?(Bundler)
# This loads your :assets group in the development and test environments
Bundler.require *Rails.groups(:assets => %w(development test))
end
This particular stylesheet is a SASS stylesheet (i.e., should have the extension .SASS or .SCSS because asset-url is a helper from the sass-rails gem)
This stylesheet is actually loaded in the asset pipeline (it should be named application.css.scss or be required/#included by application.css.scss)
If after all of this is true you still have issues, well, then I'd say something silly is going on.
Your first one looks fine and works for me. So a few things to check:
Is you image up_arrow.gif in the same directory as the CSS file? (Or, if your CSS is in the HTML page, then the same directory as the html file)
Use the debug tools in a browser, like Firebug in Firefox or in Safari right-click and select "Inspect Element" (turn on developer menu first in the Safari prefs). Look to make sure the computed CSS properties are what you expect, and then look at the resource / network tabs to see that the browser is trying to load your image from the right location.
Is the image being used as a bg image but just not visible because the A element is too small? If you have no text in your A element it will be 0x0. If it has text and/or size properties it might still be too small if the background image has a bunch of blank space. Try making the A tag larger to see if this is the case. E.g. add a width and height property to your CSS, but also a display: block property seems to be necessary.
If you want an image to be the button, you could also just put an IMG tag inside the A tag. It might be a bit easier, though you can get the CSS to work if you want.
This works for me:
<html>
<head>
<style type='text/css'>
th a.asc {
background-image: url(up_arrow.png);
width: 32px; height: 32px; display: block;
}
</style>
</head>
<body>
<table><tr><th><a class='asc'></a></th></tr></table>
</body>
</html>
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");