I am just starting to look into html and css. I have already build something that should become a website, however when I wanted to organize the files I have put picture and code in two seperate folders and now the preview won't show the images. The rest of the CSS file still applies ...
Can anyone help with this newbie problem?
Thanks ! :)
You'll need to change the paths in the CSS file too; if they used to be e.g.
style.css
apple.jpg
and you had
background-image: url(apple.jpg);
and now you move them to
css/style.css
images/apple.jpg
you'd need a relative path like
background-image: url(../images/apple.jpg);
Related
I am trying to link my CSS file to my html file and it is not linking without a Full path. They are on the same level, and I don't get the effect specified in the CSS file. The simple code in CSS is
body { background-color: blue; }
Thank you in advance for your help.
enter image description here
Correct me if I am wrong, but as far as I can see in the screenshot, the HTML and the CSS are not in the same folder. If you want to link to a CSS file that is in a higher directory you should use ../.
In your case, your code should be:
<link rel="stylesheet" type="text/css" href="../../css/styles.css">
Note: Please paste your code in your post instead of making a screenshot, it makes it harder for people to copy / edit things.
It seems you are not in the same directory as your css file. To achieve the desired reult, you will have to go up 2 directories and then access the file through the css folder.
How can I do that? Because I don't really know the word but I hope somebody knows this.
If you guys don't understand this then there is a link.
https://media1.tenor.com/images/0f097ed319d498c2bda3d87ba4f6ff10/tenor.gif?itemid=12846096
It's a gif but they set it into a cool style and I don't know how to set it like that.
The page most likely isn't actually a gif image, it could be some file structure like
> tenor.gif
>> index.html
where tenor.gif is actually a folder, with index.html inside it. Per W3C standard, folders automatically open up index.html if there is one directly inside it.
You could put whatever html code you want in index.html and styling.
You can check the contrast of the styles in the CSS documentation, they usually add you to the styles and filters, so they are fully configurable
background image is not coming from css in joomla 2.5 .
I am writing this css code for background image
background-image: url(images/abc-md.jpg);
However if i am trying on my local machine by creating a folder name website and keeping the html code and css in it ,and images are placed in a folder named images which is also kept in side website folder
Please help how i can make images to come from css whether inline or external in joomla
If you are calling background images in your CSS, then the path to the image is relative to the CSS file, not the root of your website.
If I understand things correctly, your images and CSS directories are both at the same level inside your website folder, in which case what you want is:
background-image: url(../images/abc-md.jpg);
Note the ../ in the image path.
Good luck!
Most likely the style sheet you're editing is your template's? In that case, images/abc-md.jpg would be in /templates/your_template/images/ and not in the root.
To make it simple, just add / to the URL of the image:
background-image: url(/images/abc-md.jpg);
If it still doesn't work, give it a go with firebug (or chrome dev tools) and see if the rule is picked up at all (maybe you're using the wrong css selector) and if the image can be loaded and if the container size is large enough to display it and the possibilities are endless, why don't you try the above and let us know some more, i.e. at least your site's address ?
Can anyone please help.
I am refreshing my knowledge of HTML and CSS (its been 4 years since I worked with these languages) and I am having trouble referencing images in a folder structure that I have. The enclosed image shows the folder structure that I have for my project.
What I want to do is from my index.css file in my CSS folder, use the following line of code to access an image, Logo 1.png, from my Images folder to use as a background.
body
{
background-color: #FFFEF0;
background-image: url(./Images/Logo 1.png);
}
However, this does not seem to work, I see no image. I have also tried ../Images/Logo 1.png, but again this doesn't work either.
From my index.html I can get an image to display from the Images folder by using ./Images/Logo 1.png (note ../ vs ./)
Am I going about this the right way or not? I did some digging on Google about referencing relative paths but there werent any great examples up.
Can anyone please tell me where I am going wrong with this?
If your URL includes spaces, you should really enclose the reference in quotes, also replace the space character with %20:
background-image: url('../Images/Logo%201.png');
Add 2 dots, to go up one level in folders, so if you have your images in one folder and then your css in another you'd need to go up one level and then in to your images folder eg:
background-image: url(../Images/Logo 1.png);
You might also get issues with using a space in the file name, try using an underscore instead :-)
If you use image in css, you need put source file related to css file, so if your structure is like:
index.html
css
style.css
images
background.jpg
your css should be like:
background: url(../images/background.jpg);
Also dont use spaces in file name.
use the .. to go up one level in the directory
quote the url (optional, however advisable for best crossbrowser support)
don't use spaces, try underscores instead
good practice for simplifying things: folders and files lowercase, that way you don't have to remember if the case
background-image: url("../images/logo_1.png");
Two issues, first the stuff with the url should be in quotes like this
background-image: url("../Image/Logo 1.png");
Second a single dot referrers to the current directory that the css file is located in, so when you used "./Image/Logo 1.png" it tried to find a folder called image within the CSS folder. You need to use double dots ("..") in order to go up a level within the file directory. That should fix it, assuming that your html correctly includes the css file.
I'm sure there is a very simple explanation for this but... How do I add a background image to my Joomla site? I am using a modified version of Atomic. The obvious thing to do would be to simply go into the template.css file and add a background-image property to my body or divs... however, it doesn't take. If I change the background color however that works fine. Perhaps the path is incorrect but I've tried it a hundred times and I doubt I'd get the path wrong every time. I've even tried placing the image file in the root folder, thus eliminating the possible mistyped path to the file.
Any ideas?
Thanks.
Editing the template CSS file is definitely the way to do it. This should help -
Folder to put image in:
JOOMLA FOLDER/templates/atomic/images
CSS to use:
#ID.class{background:URL(../images/background.png);}
If that doesn't work, post a link so we can debug for you.