I have been trying to speed up my website, and in doing so I combined a number of my images into a sprite file. Everything works great now, however, when I run the site, either locally or on the test site it loads the sprite file twice, and I can't for the life of me figure out why. I am using masterpages with asp.net, and I only have one css file, not including the css files that some of my telerik controls use, and I have not tampered with any of the telerik css files or sprites. You can venture to our test site at: http://www.myheadpiece.com/test and take a look. The name of the sprite file is ms1.png. I can also provide other code/answers where necessary, I am just not sure what/where to look. If anyone has any ideas please let me know. Thanks.
Check the case of the paths to the sprite, you have
http://www.myheadpiece.com/test/Images/Structure/ms1.png
and
http://www.myheadpiece.com/test/images/Structure/ms1.png
One is with a capital "I" the other one with a small "i". So in you CSS you should refer to the sprite either with "Images" or with "images".
Your css should look like this:
.Sprite { background-image: url("../Images/Structure/ms1.png"); background-color: transparent; background-repeat: no-repeat; }
.HeaderLogo { background-position: 0 -768px; ... other styles ... }
.CartButton { background-position: -818px -754px; ... other styles ...}
And both HeaderLogo and CartButton should have second css class assigned ('Sprite') so you load an image only once for Sprite class and all the elements that are going to use it change it position only.
Related
I'm creating a Spree store, and trying to make a button use an image instead of the default button that is included with the extension (and bootstrap). I can target the proper button in CSS, and deactivate the background color, border, etc. The background url doesn't work for the image (path: "app/assets/images/heart-icon.png"), but it works fine for any external image url.
I assume my problem lies within the asset pipeline, but I can't figure out the proper path to set as the url.
From my .css file:
form.new_wished_product button.btn.btn-info {
background: url(assets/heart-icon.png);
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
color: transparent;
border: none;
}
The button doesn't need to change when hovered or clicked -- it's just a simple image.
Thanks!
EDIT:
I saw the related question but thought mine was different because I had tried those solutions. I was trying to do this with plain CSS and changing the file extension to .css.scss worked for me.
Have you tried the image-url() helper instead of url()?
image-url('heart-icon.png');
This will find the asset within your site's file structure.
When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.
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.)
There are two CSS files referenced on the same page: A generic.css file and a custom.css file. The generic file has default styles in it that are overridden by the custom.css file for the same elements. This allows users of the site to customize or "skin" their pages without needing to recreate the entire generic.css file. Only a few styles would be overridden.
My question is the following: If the generic.css file has a style for an element with a background image and that same style is overridden in the custom.css with a different background image, is the first image ever downloaded by the browser?
Also, I want to find out if this is bad practice - customizing or "skinning" a generic CSS file with another custom CSS file to override a few styles, including specifying different background images.
While not totally definitive, this site ran some tests regarding this. The significant statement from that site that is related to your question is:
CSS images are kicked off not in the order in which they appear in the
CSS but in the order in which they’re called in the HTML. I’m not sure
of the precise moment when the download is initiated, but my guess is
that it happens just after the CSS rules have been matched, when the
property values are assigned to the DOM elements.
This at least tentatively confirms what I thought I remembered in the back of my mind reading on this a few years back, namely, that background images which are not ever displayed (as in the generic.css images being overridden by the custom.css images) are not ever downloaded.
Further confirmation of this would be the typical image preloader script that used to be so common prior to sprite images (and is still found in certain uses). It was designed to download images that would be used on :hover in css, because without it, the image would not load until the first hover was initiated, and this caused an unsightly delay. So that, also, argues for the fact that unless actually displayed (or preloaded), the background images themselves are never loaded.
I don't think there are generally any issues with "skinning," unless you are essentially overwriting most or all of the generic.css with custom.css, then one could argue, why load the generic at all. But as you said, normally there are just a few styles overwritten.
I think i answered NO and NO BAD PRACTICE. Because when the css file readable / executable by the browser, the browser will make comparisons to find the same value or the difference between css file and then combine them.
Easy example:
css1.css on file there is a line:
.test {display: block; width: 100%; height: 600px; background: #991100 url("image1.jpg") center top; border: 1px solid red;}
then the css2.css there is also the line:
.test {background: #991100 url("image2.jpg") no-repeat center center;}
the result of a combination that will be executed and run by the browser are:
.test {display: block; width: 100%; height: 600px; background: url("image2.jpg") no-repeat center center # 991100; border: 1px solid red}
where the "background: # 991100 url("image1.jpg") center top;" read but not called / executed by the browser.
Far as I know the value of the file css1.css be stacked by the value of the css2.css. What if there a css3.css file? then the file css3.css will also stacking on the combination of css1.css and css2.css.
Hope it helps.
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");
can some on help me on how i can reference images i have all my images stored in an image folder which is located in the root folder (..\images) in my css class i have the the following
#image
{ background-position: left;
background-repeat: no-repeat;}
.background
{
background-image: url(..\images\image.gif);
}
and in my .cs file i have
image.Attributes.Add("class", "background");
image is a div tag which is in my aspx code !!
when i run this code i image doesnt show, any ideas what i might be doing wrong
You should turn those slashes in your paths around from \ to /
Also, I usually put an url keyword before the parenthesis in CSS, but I am not sure if this is required:
background-image: url(../images/image.gif);
UPDATE: If the image field in your C# code is some kind of webcontrol, say an Image control, you should use the setts on its CssClass property rather than explicitly adding a class attribute. What you are doing now might yield two class attributes in the markup, which might not get handled well. You can do a quick "view source" on your page to test if this is the problem.
If this does not help, see Nick Cravers answers. The path from your CSS to the image is wrong, or the image file is not where you believe it is.
URL references in a CSS file must be relative to the CSS file.
Make sure that compared to the CSS file the image is in ..\images, if not, adjust it to be in relation to the CSS.
Also your background declaration should be like this:
background-image: url(..\images\image.gif);
Example:
CSS = \CSS\styles.css
IMG = \Images\image.gif
Style = url(../Images/image.gif);
CSS = \styles.css
IMG = \Images\image.gif
Style = url(Images/image.gif);
The style definition:
background-image: url(../images/image.gif);
is saying "go up one directory and into the images folder". Try:
background-image: url(/images/image.gif);
This assumes that the images directory is in the root of your website.