I designed my own 404 error which you can find here:
http://www.ianbauters.be/errors/404.html (this one works)
But when I trigger a 404 by going to http://www.ianbauters.be/qsdfhj everything is there except for the orange background image I use.
Anyone has any ideas how I can fix this?
Using a relative path to the URL in your CSS is the problem. For example...
url('assets/images/opacity.png')
Try making it absolute...
url('/errors/assets/images/opacity.png')
Edit - something else to be aware of...
When using url in CSS via the <style> tag, relative paths will always be relative to the current page location. When using url in CSS via the <link> tag and .css files, the path will be relative to the location of the .css file.
Because you have added a relative path for the background image turn it into absolute and you will have no more problems
.oh {
...
background-image: url('/assets/images/opacity.png');
...
}
If you view the both pages using firebug, you will notice the error on the second page, it's loading image from http://www.ianbauters.be/assets/images/opacity.png
but the correct url is http://www.ianbauters.be/errors/assets/images/opacity.png, just use the whole url
use
background-image: url('/errors/assets/images/opacity.png');
instead of
background-image: url('assets/images/opacity.png');
Change the url in css for .oh
from
url("assets/images/opacity.png")
to
url("/errors/assets/images/opacity.png");
Related
I have a problem which is my background image doesn't show up. I am sure that my url is correct (Because I have used this url in other aspects).
This is my css file:
body{
background : url(assets/image/main.jpg);
background-size: cover;
}
so what happened?
This is my folder's structure:
/assets/
css/
style.css
image/
main.jpg
/index.html
Remove the space between background : and add quotes to your URL string so it looks like background: url("assets/image/main.jpg");
Beyond that just ensure that the filepath from this css file still maps to that folder correctly, just because it works in one css file doesn't mean it works in another if the folder structure differs.
Your code is correct.
You should know that the path is relative to the location of the style (and not the html).
The fact of having used this code elsewhere does not mean that the path is correct here.
After that may be the image which is corrupt.
I have this in an external css file, but its not working at all. I would assume I'd written it wrong, but when placed internally, it works fine. Any ideas as to what might be going on?
html
{
background-image:url(images/background-grid.jpg);
background-repeat:repeat;
}
I assume your CSS file is in a folder like this.
/
css/
yourcss.css
images/
background-grid.jpg
index.html
The paths given in your CSS file are relative to the path of the CSS file (in the example I given, the css folder). So you should use ..:
background-image: url(../images/background-grid.jpg);
I think you didn't write it completely wrong
But it's better to use body instead of html.
Explanation why to use body
It allows you to use an overlay on top of that body tag. Like a grid-ish background on the body and a shade on the side. But both are correct. Depending on what you are trying to do ofc.
If you don't repeat your background there is a possibility that your picture doesn't use the whole page and then you should use the html tag. But in this case it gives the same solution because of that repeat.
SO replay: tnx to attronics
Explanation of your 'error'
If your images are in a different folder than your html page (which should be the case).
You should use .. as relative path to your css file.
Without the .. it would mean that you are going to look for that image in the same folder as your html page.
body{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
Here is a site that gives some Basics of CSS. Didn't check the source though.
It may be your folder structure, try
html
{
background-image:url(../images/background-grid.jpg);
background-repeat:repeat;
}
When we have these folders
css
img
and index.html
when we write css in style tag in index page which is called internal css then it works right but when we right css in styles.css in css folder then background img does not work.
because you move with in folder and path of background img does not work. so you have to write like this:
background-image: url('../img/bg.jpg');
then it will work properly
.. this mean go one level up.
So, if your folder structure is like this:
image/
background.png
css/
stylesheet.css
then your css rule should be like this:
html {
background-image: url('../image/background.png');
}
If your folder structure is like this:
style/
image/
bgr/
background.png
css/
deeper/
stylesheet.css
then, go up two levels to the image directory like below:
html {
background-image: url('../../image/bgr/background.png');
}
And so on. Just add up the .. followed by trailing slash /.
I am trying to set my background image of the page via CSS using the following code, but no image shows up. The image will be tiled on the page and is only 10x10px big. Nonetheless, it still doesn't show up. Please can you tell me what I am doing wrong?
<body>
<div id="background"></div>
</body>
#background {
background-image: url("img/background.png");
}
Is the image in linkToCssFolder/img/background.png? The image path is relative to your CSS file.
Also, does your #background div have content in it? If not, it will probably have the default 0px height, and not show any background.
You need to give the element dimensions too...
#background {
width: 10px;
height: 10px;
}
Background images do not make their container stretch to fit.
Here is a list of all CSS keywords
Just tried this at http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple and it works.
I assume your image is not at right location or if the background property is being over written by style or another css rule.
such a no brainer thingy of css and html often forgotten even professional due lack of proper focus and just being tired.If you knew it just rest for a while.
here are some tips if you lost in the tree of web design.
Check the files if it is there, the file type and support for the file in your browsers
Check the directory if you are online you can put all the URL of the file OR use "../" if your css and the image file is in different level of directory.
Check your syntax.
rest, take a nap or have a coffee break.
Firstly check your CSS and image location
1) Both in same folder then try " background-image: url("background.jpg") " simply.
2) If you have img folder and image inside this folder then try " background-image: url("img/background.jpg"); "
3)If you have img folder and If you have CSS folder then you have to go one step back then goes to image folder and choose image it seem like this " background-image: url("../img/background.jpg"); " where '..'represent one step back
#background {background-image: url("img/background.png"); height:300px;}
add height element in css
Another source of error may come from image extension name, for instance in :
background-image: url("img/background.png")
Image name must be "background" and NOT "background.png"
Image "background" must be a PNG and not another image type like JPG
Hy,
to get your image you must imagine that you are in a terminal(or cmd prompt) and write as youuld do to get to the image.
So let us say that your css file is /css/ and you image is in /img/background.png.
To get to the image you must write this code background-image: url("../img/background.png");
This is because in terminal/cmd prompt to get to the image from your .css file you would first type cd .., then cd img, then background.png. Hope it will help you!
Cheers!
I am using the following code, but it is having no effect!! Can this be done?
html {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
This will work if you actually have an image at the specified location, although it's usually applied to the body element. It could be that the body element has a background colour that is covering the image.
Note that paths are relative to the style sheet file, not the HTML file embedding it, so a path pointing to images/repeat-x.png in /css/styles.css would result in /css/images/repeat-x.png.
Yes, it can be done, but it needs to be on the <body> tag.
Your image might not exist, or you might have a different background covering it.
If you are trying to set the background of the entire page I'd recommend:
body {
background: #d9dbdc url('images/repeat-x.png') repeat-x;
}
make sure the url is correct, you can use browser debug tool like Firebug in firefox to inspect the html
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .