I have a hard time adding picture through background-image property in css
my file structure looks like this:
www
styles
stylesheet.css
images
background.jpg
I tried:
background-image: url("/images/background.jpg");
background-image: url("images/background.jpg");
background-image: url("background.jpg");
background-image: url("../images/background.jpg");
background-image: url("/../images/background.jpg");
background-image: url("../../images/background.jpg");
I also tried all of these options without quotes. I copy-pasted image's name and my folders are as I stated: main folder in which I have styles folder(inside is stylesheet.css) and images folder (inside is background.jpg). The image did not load in chrome or firefox. What path declaration should I use to make the image show?
www
index.html
styles
stylesheet.css
images
background.jpg
that the directory, here inside index.html / index.php (where u want show)
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
remember for href link
and then at stylesheet.css
background-image: url("../images/background.jpg");
background-image: url("../images/background.jpg");
This is correct. If it is not working, perhaps the path name is not the problem.
Are you running this from a server?
Or, are you running this from your computer?
Try changing the situation and see if anything changes.
I'd put my money on spelling mistake, though. Best to triple check it.
Related
I have a css file in my static folder, where I set a background-image for a site of my Flask App. However, no matter what I try, it doesn't apply any "size" parameters I insert. It always stays the same! background-size is ignored by the browser. It always looks the same.
In Chrome the image is always too big. In firefox it works correctly. When I press ctrl + plus/minus, the background image gets bigger/smaller in chrome, whereas in firefox it stays the same. What am I doing wrong?
I insert the style.css file in my html-template like that: <link rel="stylesheet" href=" {{ url_for('static', filename='style.css') }} ">
my style.css-file:
body {
background-image: url("myPicture.jpg");
background-repeat: no-repeat;
background-size: cover;
}
The url in the .css file is not pointing towards a valid image file url. Assuming the file is stored in the static folder of your app, you can try:
background-image: url("static/myPicture.jpg");
I'm not sure where the current background image is coming from, we simply don't have enough info to properly debug.
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 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.
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