I am trying to put a code that takes my background image in an html file from another domain.
Here is an HTML snippet where I try to pull in from an external URL:
<div style="background-image: url(http://anotherdomain.com/images/bgimage_1.png)"></div>
But this is not working. I know that I should normally write this in a CSS file and put a relative path, but I haven't done that yet. Does anyone know if this is possible?
I found a problem, it is working when i add quotes
background-image: url('http://anotherdomain.com/images/bgimage_1.png');
Even if W3C says that quotes are optional, in this case they are mandatory.
Related
I've been trying to put a background image on a website using html and css, I've watched youtube videos but it never works for me. I was wondering if anyone could help point out what I've been doing wrong. Thank you!
Tried putting an image as a background for a website but whenever I save and reload the website it never appears and is just blank.
I forgot to add the speech marks thing here, but even when I added it, it still never worked
You can try this code
With proper path.
update the path to
background-image: url(../ronaldo.jpg);
go through this article for a better understanding of using path absolute-vs-relative-paths
You have the wrong path. Your image is not in the same folder as your css file. Put a correct path, try this: background-image: url(../ronaldo.jpg);.
If it still doesn't work, tru putting the path in between of " " like this:
background-image: url("../ronaldo.jpg");
Try typing in "/" in the url brackets and the intelisense should appear.
It should give you all possible images in your folder.
enter image description here
I am trying to make a full page background image when the site loads. The problem is, none of the images i tried wont' load.
I checked my code syntax, checked the image format, checked my path to image folder, everything seems to be fine but images still won't load.
CSS:
.header-nav-menu{
background-image: url("../project/full.jpg");
}
I am not getting any error messages so I can't figure out where is the problem.
Try referencing the image at root level. Like this:
.header-nav-menu{
background-image: url("/project/full.jpg");
}
You should also be able to check the file path with your code editor, if it redirects to the image then the path is good and syntax are good. Check if you uploaded your img correctly to the server if you are using one, otherwise put it directly at the root as said below, it can't be messing for a lot of possibilities.
You should try your browser's development tools to investigate. (F12 on Chrome). You can see if the image section is present in the page. Try using a full path, rather than a relative one to see if that gives you anything. Also it could be a permissions issue where the folder containing the images is not accessible.
.header-nav-menu {
background-image: url('full.jpg');
}
Read up on pathing: Difference between Relative path and absolute path in javascript
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.
I'm dynamically creating a PDF using ABCpdf (HTML -> PDF)
I'm trying to create a Table Of Contents (with leaders), and I think the easiest way to get the leaders is using a repeat-x background-image. Here is my file structure:
/Web
GenReport.aspx
/images
tocback.gif
/Data
template.html
GenReport uses an html template, and replaces all applicable sections when generating the pdf. The styles also live in template.html.
Everything is working, except that the image isn't being found (If I use a direct path to another image on the web, I can get the image to appear in the background of the table.)
So, my question is, how do I reference the tocback.gif? Does it need to reference the path from the template (/Data/template.html - see (1) below) or from the page that generates the pdf (/Web/GenReport.aspx (2) below)?
(1) background-image: url(/images/tocback.gif);
(2) background-image: url(../Web/images/tocback.gif);
Obviously, neither of these are working for me. Am I missing something?
(I wouldn't even mind adding a hard-coded reference to an image on the FS, if that is an option.)
I found the answer in the manual
http://www.websupergoo.com/support.htm (6.17)
You can't get that image rendered into the pdf. Add a new page, render your html into that page.pass that page url to AddImageUrl() method to generate pdf successfully.
find sample code for this in abcpdf helpline.
cheers