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
Related
Beginner, learning basics in HTML/CSS
I have an issue with the background image.
When i code it with outside link like this it is working:
background-image: url(https://furniturefusion.co.uk/wp-content/uploads/2018/07/inspiration-banner1-2.jpg);
When i do it with a downloaded picture (same picture), the image is not showing in a browser.
background-image: url(/images/cover.jpg);
I assume all other (height, weight) is good, since it is working with http.... And image is in the same folder where is index page and style folder.
Where is the problem?
If your image is in the same folder as index and css then the url should be:
background-image: url("cover.jpg");
Using
background-image: url("/images/cover.jpg");
you are referring to an image that is in a subfolder named images (that you don't have)
Obviously I assume that the missing quotes are just a typo
it will likely be because your path is now incorrect. If you open up the chrome developer tools (F12 on keyboard) go to network, then refresh the page. You should see the image in there in red. You need to adjust the path so it is correct.
the start of the URL matters. Starting with a '/' will start from the website root. '.' will do current directory and '..' will go up a directory.
so if your path is:
www.example.com/images/test/cover.jpg
and you start in:
www.example.com/css/
doing /images/test/cover.jpg would be www.example.com/images/test/cover.jpg as then starting '/' makes it start from the root.
doing images/test/cover.jpg would be www.example.com/css/images/test/cover.jpg as this doesnt start with a '/'.
you could do: ../images/test/cover.jpg as this would then be www.example.com/images/test/cover.jpg
I have an image which should be displayed on all the pages....it is working perfectly fine for all the pages except for a single page. On Inspect it shows could not load the image.
<div class="wrapper">
<img src="images/uk.png">
</div>
From the look of your code, my guess is that it appears to be a relative path problem. The page in which you cannot load the image successfully is probably in a different folder to the pages where you can load the image successfully.
<img src="images/uk.png"> is a relative link. According to that link usage, the file uk.png needs to be in the folder images, and the folder images needs to be in the same folder as the file you are trying to include the image on.
If your images folder is not a sibling of the file you are trying to include the image on, you have three options:
use ../ to navigate to the correct folder (<img src="../images/uk.png">)
use the root-relative / prefix (<img src="/images/uk.png">)
use an absolute URL (<img src="http://www.example.com/images/uk.png">)
For more information about relative paths, check out CSS Trick's article, Adobe's article, or IfYouCodeItTheyWill's article.
If you have ensured that your index file is indeed in the correct location, and your path is indeed correct, you may have a caching problem. Try holding SHIFT while clicking the refresh icon, and see if that works. If not, you can bring up your console with F12 to further debug the problem.
Hope this helps! :)
I have encountered an issue and I really don't know what is causing it. I am working in brackets and the site works perfectly in preview.
However, when I click on the actual index.html file my background images from my scss are missing.
Uploaded images via src are working
Rest of my sass is working
Js is working
Only the images for my backgrounds ( using url ) are not working anymore, so I presume it has something to do with the url.
An example of the scss:
.jumbfirst {
background: url('/imagini/images/background6.jpg');
background-size: cover;
width: $fullwidth;
min-height: 600px;
}
Any ideas? Thank you!
It depends on your devel setup, meaning you use relative paths but depending on the structure of your files and how you run your index.html the browser reads the paths differently.
I'm guessing that double clicking the index.html file doesn't show it from your local server but as an absolute path like
file:///Applications/XAMPP/xamppfiles/htdocs/devel/test/index.html
This example is from a MAC and it's the path to the index.html in the file system.
You should either have a local devel server (e.g. XAMPP) or if you already have one change the address in your browser to something like
http://localhost/devel/test/index.html
In this case I'm calling index.html from my local server, inside the devel/test/ directory.
Hope this helps.
It's because path relativity to your image file. When it comes to domain image shows because the path is set to current directory. But with index.html image path will be converted to something like this http://www.example.com/index.html/imagini/images/background6.jpg. Since the browser try to find image in that path image wont be found. Check your console in developer tools of chrome browser. You may get more details from there.
This might be fixed by removing starting / from your image url or creating a .htaccess with proper parameters.
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.
Well I built a page which is working absolutely fine as you can see below:
but when i copy my folder to C:\wamp\www\myFolder and run it through localhost using WAMP Server it look something like this
the problem is that the attached Style Sheets are not working and the Java Script is not working.
see below
where you see the green dots here the images are loaded fine...
where you see the pink dots the images are not loaded
where you see the black dot.. 5 boxes in the red section... they are javascript rollover images well they loaded but are not working.. once mouse over the rollover image is not displayed
on the top right where you see the yellow boxes.. the links and the textbox and the button have css style attached which is not working...
WHATS HAPPENING
Perhaps your assets (css and js) are served incorrectly?
If you view source of you page in Firefox, you will be able to click on css link. Do it and see if it take you to your css. If not, then you have the answer - assets path is wrong.
It looks like the images are in the wrong place.
WAMP by default points to C:\www. If your images in your CSS/HTML are referenced by "/images/example.png", then Apache interprets this request as:
"Look for the file example.png in the folder C:\www\images\"
You need to either add the directory "/myFolder/images/" to the image URL or reference the images relative from the CSS file.
This means if your css file is in your C:\www\myFolder and you have an images folder in C:\www\myFolder then your images inside your css will be declared like this:
url('images/example.png');
Note that the trailing slash has been removed, this means it will be relative from the CSS rather than from the root directory (C:\www)
Hope that helps.
i had my links like
href=".\images\image.png"
just changed them to
href=".\images/image.png"
the server was doing what it was supposed to do...