I'm having a problem with my css and it's really winding me up. basically i have a 'background-image: url' set in my styles sheet and for some reason it won't display my file 'form_bg.png' but having just pasted a photo in the directory '1.png' this shows up. No matter what i try, whether i rename the file or anything like that 'form_bg.png' will not show?
Obviously the directory path is correct as it's pointing to '1.png' just not other files.
Can anyone let me know why this would happen?
Thanks
#main form {
width: 440px;
height: 450px;
background-image: url(assets/img/form/icons.png) no-repeat;
padding-top: 50px;
}
using no-repeat in background-image is not correct. to use them in one line, use 'background' like this:
background: url('xyz.png') no-repeat;
and about your problem, try with absolute path of your image like this:
background: url('http://www.google.com/images/srpr/logo3w.png');
I think that image is not a original png format that is maybe file extension only renamed so that the image is not shown to check this open that image in photoshop, if it is extension changed it will not opened.
Related
I have this image in one of my project's folder:
I wantto make a icon with that image, so i tried to call it like this:
But it keeps occuring the error:
I think I have this error because I'm not giving any path.
Can you help me please?
Thanks
The css file is searching in the same folder as it to find the background image.
Try:
background: url("../img/Arrow_Circle_Right-32.png")
The ".." goes back one folder, then the img accesses the image folder.
Use this path in your css:
background: #ff9900 url("../img/Arrow_Circle_Right-32.png") no-repeat 10px center;
Please note the prefix for your base path: ../img/
Like that you go back from the css directory and then you enter in your img directory, that include your image.
I am using the following CSS code:
body
{
background-image: url(img/tasky_pattern.png);
}
My image address is downloads/dist/image/tasky_pattern.png. I have no idea where I am going wrong and how to correct this.
Thanks.
You need to make sure your image exists in your folder, so upload your image to the ./img/ folder. Then you could use the following CSS code:
body
{
background-image: url("img/tasky_pattern.png") repeat;
}
If you cannot upload the image to your ./img/ folder, you can upload the image to a free file hosting website and use the link they provide instead.
The image you are link to img/tasky_pattern.png is under a folder called downloads/dist/image/tasky_pattern.png but you used img instead of image
Have a look at fixing that typo. This is probably why your image is not showing.
To check your file references open your page in chrome and inspect element. Find the css code that says background-image: url(img/tasky_pattern.png); and then navigate to the destination. This will give you the full url in your browser address bar and will show you where you went wrong with your path name
the css background default behavior is repeating itself...
you can specify exis
background: url('image_path'); /* it repeats itself */
// or //
background: url('image_path') repeat-x ; /* it repeats only x-exis */
// or //
background: url('image_path') repeat-y ; /* it repeats only y-exis */
// or //
background: url('image_path') no-repeat; /* no repeats */
SEE DEMO
I am trying to set my site's background image to a local img through CSS. But the code will not let me use a local image, but a non-local internet image is fine. Why is that?
Code:
html {
/* background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); */
background-image: url("img/diamondPlate_bg.jpg");
}
The bottom image is the one that should show, but it doesn't. but the top image does work. Why?
You have to provide the full image path, as the browser can't determine where to search for.
According to your CSS file path, I will suppose it is at the img directory with your HTML page, you have to change the url as follows:
body {
background: url("../img/diamondPlate_bg.jpg") repeat 0 0;
}
This is like going back one folder and entering the img folder to fetch images.
Arg, it's getting frustrating!
None of the solutions on Stack Overflow are working for me, and I just don't know why my background-image isn't showing!
I gave it a background-color, and it worked fine. Offline you can see the background-image, but when I upload my site it's gone. When I type the path of my image, it shows. So it's there.
This is the site:
http://stilld.nl/2014/
In the dark blue area should be my logo.
#fade-it{
background: url('../images/branding.png');
margin-left: auto;
margin-right: auto;
display: block;
width: 408px;
height: 500px;
opacity: 1;
position: relative;
overflow: hidden;
z-index: 2000;
}
I've tried a ridiculous high z-index, still nothing. I tried opacity: 1. Nothing. I tried display: block. Nothing. I checked the path a thousand times. I used background: and background-image:. Still nothing.
Hope you guys can help me out!!
The file branding.png does not exist on your live server. Check it's location and make sure that:
The file is in the right place;
The CSS is referring to it correctly.
For reference, the way your CSS is currently set-up, it attempting to load this image from: http://stilld.nl/2014/images/branding.png. Try clicking the link, you'll see it returns a 404 'not found' error page.
I think the path that you have provided is not matching on deployed site.
Try giving image path as
background: url('./images/branding.png');
instead of
background: url('../images/branding.png');
may be this will work
You should make sure that the image is in the right folder, relative to the URL you're using.
../images/image.jpg means "go up one folder, find a folder named "images" and use the image called "image.jpg" inside."
./images/image.jpg means "find a folder called "images" in this current folder and use the image called "image.jpg".
/images/image.jpg means go to the root folder, find folder "images" and use "image.jpg".
EDIT: Found it.
Your image is in /2014/images/. Right now you're trying to make it find the images folder inside the 2014 folder. What you can do is set the path to:
/2014/images/branding.png
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.