MyBB Community Forums

When I inline my CSS images in the html file then it works, and when i use images in linked css file then images wont show up. Linked css is properly linked as other styles are working fine the only problem is with images.

Here the things i have tried so far in the linked css.
body{
background:#000 (images/bg.jpg);
}

but i only see the black #000 color not the image, but when i write this as a inline style then it works fine.
<html>
<style>
background:#000 (images/bg.jpg);
</style>
</html>

now I see image properly, what is this issue ? moreover if i host the pictures in photobucket and then use that direct link in attached css file, then it also works, How strange and frustrating thing is that ? how to solve this issue Sad

First off, for correct syntax, you should be appending url before the parenthesis. Personally I also like to enclose the image path within double quotes, but this is optional. For example:

body {
	background: #000 url("images/bg.jpg");
}

The reason why your code doesn't work in a separate stylesheet is because it is probably in a different folder other than the root. Declaring your CSS in the HTML document itself works because you are referencing the image from the root of your website, and so the path to the image stands correct. It's requesting http://example.com/images/bg.jpg, which exists.

However, in your separate CSS file, assuming it is in a folder called ./css/ or something like that, the image path is actually referencing http://example.com/css/images/bg.jpg, which does not exist - hence why it isn't loaded. Whenever you have your CSS in a separate folder and you need to reference images outside that folder you need to go up one level (to the root) and then search for the image.

To go up one level you use two dots for as many folders as you need to go through. If the file you want is in ./images/bg.jpg but your CSS is in ./css/style.css, you have to use url("../images/bg.jpg"). As another example, if your CSS is in ./assets/css/typography/base.css then you have to use url("../../../images/bg.jpg"). I'm not sure where your CSS file is located, but assuming it is in ./css/, you would do:

body {
	background: #000 url("../images/bg.jpg");
}

i completely forgot that thank u very much

sunjava1

faviouz

sunjava1