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.
Related
Problem:
I have a table of images that I'm using as an overview/introduction. I want the end-user to be able to click on the image and it link to the HTML page for that image's corresponding introductory information1.
The problem is I can't seem to get the linking part to work. The table of images shows up fine, but clicking on an image just takes me to a page not found screen (see image at bottom of post). I've spent about an hour on Google but haven't found a solution yet.
1each image has a corresponding .rst file with the info I want the end-user to see
Info:
Sphinx 1.8.5
Python 3.7.6 (MiniConda)
Building html pages from reStructuredText files
sphinx-build -b html source build
make clean html
make html
Nothing special has been done in my conf.py file, other than including the RTD theme
I'm guessing I will need to do something fancy in my conf.py file if doing what I want is possible at all
Adding the .rst files to the .. toc:: directive in introduction_file.rst didn't help
Here is the reST code I have so far:
the image directives are all inside a table; table omitted for brevity
I'm also confident that the 'image directives inside a table' thing is not the issue
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: introduction_files/my_first_image_intro_file.rst
.. also didn't work:
.. :target: introduction_files/my_first_image_intro_file.html
File Structure:
Home.rst is the entry point for the HTML pages (i.e. it used to be called index.rst until I renamed it and refactored conf.py accordingly)
--build
...
-- source
|--Introduction/
|--introduction_file.rst
|--images/
|--my_first_image.png
|--my_second_image.png
...
|--introduction_files/
|--my_first_image_intro_file.rst
|--my_second_image_intro_file.rst
...
|--_static/
...
|--_templates/
...
|--conf.py
|--Home.rst
I'm not opposed to doing what I want in HTML/CSS, but if there is a way to do it in sphinx then I'd prefer to do it that way. I will end up editing the HTML code regardless, but the less editing the better; Sphinx is essentially a quick-start or template.
This image is what I see in my browser when I click on one of the images in my table-of-images. The URL bar in Chrome shows the correct path to the .rst file though, so I'm a bit confused.
I tried changing the :target: file extension to .html but that didn't work either
Edit: forgot to add the location of introduction_file.rst to the folder structure
Solution:
Mix up between the paths. I was linking to the file in the source directory, but needed to link to the file in the build directory. Had to navigate back to the root directory with a few '../' prefixes, then navigate to the .html information file in the build directory. In other words, this is what it ended up looking like:
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: ../../../build/html/Introduction/introduction_files/my_first_image_intro_file.html
The target option's value must be either relative to introduction_file.rst (you don't provide its location so you'll have to figure that out), or absolute to the documentation root, i.e., /Introduction/introduction_files/my_first_image_intro_file.html.
I created an external css file but the background image is not displaying. I validated the file and it says there is no error and other elements are still applied, so I am not sure what i did wrong. Any solution?
Here is the code:
body {
background-image: url(../images/wordwall.jpg);
}
Usually problems like this are caused by a wrong filepath. The file path here has to be relative to the CSS file, so your filepath would work if the stylesheet is an a folder which is at the same level as the images folder. If that's not the case, you need to change it, otherwise your CSS file might not be referenced correctly.
This most likely has to do with the file path, try checking again and make sure all spellings are correct.
PS: '.. /' takes you one step backward from the file you're working on.
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);
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.
I had to split up a long css file. I put the smaller css files within a styles directory.
Now I have to update the the urls to go up one level with the ../ notation.
Is there anyway to specify the base URL from which to load assets like with the base tag in HTML, but with CSS?
No, there isn't. I suggest to place the CSS images in at least the same level as the CSS file so that you don't need to go backwards in the path. E.g. /css folder for CSS files and /css/images folder for CSS images. Then you can consistently use url('images/name.ext') for CSS images. This way you can place the root /css folder practically everywhere without fiddling with the image URL's.
As an alternative, you could dynamically add a class to your body tag, and use that in selectors to override css URLs depending on which directory your file is served from.
An alternative way to set the base directory in the CSS (which seems to be impossible) is to set the base directory of the HTML document with the <base> tag. This tag is not well known in the community but I found a nice tutorial in the web:
https://webdesign.tutsplus.com/articles/quick-tip-set-relative-urls-with-the-base-tag--cms-21399
It seems to be totally a good solution.