Linking CSS to images in a subfolder - css

I cant figure out the right path to use in my CSS file for
html { background-image: url('backgroundImage.jpg'); }
My folder structure is as follows:
..\MySite\ <!-- HTML files here -->
..\MySite\css\
..\MySite\js\
..\MySite\images\ <!-- backgroundImage.jpg here -->


html{ background-image: url('../images/backgroundImage.jpg'); }
../ is telling your CSS file to go one directory back and search for the image from that folder (in this case your root folder)


use html{ background-image: url('/images/backgroundImage.jpg'); }
starting with / means you start at the root of your site


Pretty trivial question. If you are using inline styles (styles inside HTML files) then the following will suffice.
html {
background-image: url('images/backgroundImage.jpg');
}
However if you are referencing images from within the css folder you'll have to use .. traversal to reach the parent folder first.
html {
background-image: url('../images/backgroundImage.jpg');
}

Related

Can't figure out what path to use in background-image: url(); to get a certain image in a Vue.js project

Currently I have a Vue.js project with this file tree (showing only relevant folders and files):
root
src
assets
image.jpg
components
header.vue
index.html
So inside the header.vue component, I have this CSS code:
.background-image {
background-image: url();
}
and I need to reference the image.jpg file inside the assets folder. I tried so many different combinations and never saw the image, so I just can't figure it out.

You could try the following:
.background-image {
background-image: url('../assets/image.jpg');
}
If it's not showing, one possible reason is that, the element .background-image doesn't have a height especially if it doesn't have any content yet. Try adding padding or height.
.background-image {
background-image: url("../assets/image.jpg");
padding: 50px;
}

CSS Background not working

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');
}

How to link to the WordPress plugins folder from style.css?

I'm trying to link to an image in the WordPress plugins folder from style.css. I've tried the following but that doesn't work:
.example {
background: url( images/photo.jpg ) center center no-repeat;
}
Plugins folder image: /wp-content/plugins/my-plugin/images/photo.jpg
Stylesheet is here: /wp-content/themes/my-theme/style.css

I know you added the "relative-path" tag, but have you tried using an absolute path, including the domain name?
Consider trying
.example {
background: url('http://full-path.com/wp-content/plugins/my-plugin/images/photo.jpg') center center no-repeat;
}
If you want to use a relative path, it also looks like you could try:
../../plugins/my-plugin/images/photo.jpg
This assumes the server is looking from the folder the CSS is in to resolve the path to the photo. The ".." represents moving up a directory level.
Hope this helps!

You can use so called semi-relative paths for resources:
.example {
background-image: url( '/wp-content/plugins/path/to/image.jpg' );
}
/wp-content/ above maps to http://www.domain.xyz/wp-content/, which allows you to omit the domain portion from the URL path to the image. If you omit the starting / character, the stylesheet will look for wp-content/... within the directory where the CSS file is.
Note: the above method wont work if your plugins directory is outside wp-content.
If you want the exact plugin directory path using WordPress functions and constants, consider infusing CSS with PHP: http://css-tricks.com/css-variables-with-php/. This way you can execute some PHP within the CSS file, which could include fetching the WP plugins directory to a PHP variable.

GWT - can't load an image from the css

#main {
background: url("images/bg_grey.png");
}
I have this code into my main.css but GWT can't find the image (it is into the default images folder of my GWT-project).
With JAVA there are lots methods like GWT.getModuleBaseURL(), but, into the CSS, how can i recover the correct path for my image?

It's relative to the CSS location.
For example, if the CSS is in /css/myStyle.css, the path for the image would be ../images/bg_grey.png

CSS Background-Image refuses to display in ASP.Net MVC

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");

Resources