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.
Related
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 cant change my body background and background color with
For example:
body { background-color:#0c0; }
And
body { background-image:url(../images/bg/stone.png); }
Pleas help !
Possible reasons of not working:
You haven't linked your stylesheet
Your image would not be in the same path.
Your image's extension would be different.
Your hash or hexadecimal color code is wrong.
Your path to image is wrong.
Here is a working fiddle proving that it does work though the background of the body is a funny one as sometimes it calls it if you are calling it off the internet and sometimes it won't so make sure you have the image in a directory called images and the call it like this:
body {background: url('images/yourimage.jpg');}
and to add the color add your color like this:
body {background: red url('images/yourimage.jpg');}
Here is a working fiddle: http://jsfiddle.net/Hive7/xmj7C/
It uses this css:
body {
background: red url('http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg') no-repeat;
background-size: 500px 500px;
}
Make sure your file that your are calling it from is in the same directory as the one with the directory images
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.
I'm trying to repeat an image I have by x and y, using repeat-all. The image isn't displaying.
Here is the CSS code:
body
{
background-image: url('Content/images/test.png') repeat-all;
}
I'm sure the CSS file is linked correctly, here is the Content folder of my application:
Any help?
That's actually not being linked correctly, if that code is in your Site.css file. It should be:
background-image: url('images/test.png') repeat-all;
I have a background image set on a web page with the following CSS:
body, html
{
background-image: url(Content/Images/bg-lounge-2-l.jpg);
background-repeat: repeat;
background-attachment: fixed; /*background-position: 0 -390px;*/
}
This background was visible until late last night, in Firefox and IE, but at some point something changed and it no longer shows in the browsers. It does show in the VS 2008 designer, and the image is in the correct location. If I paste the image url into my address bar, I can view the image. What could be wrong?
Remember that the url to the image is relative to the path to the CSS file, and not the HTML file that loads the CSS file. Also check that you have the correct spelling and capitalization.