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
Related
Im using Atom to do some homework, I am a beginner at html this is my first assignment and I am trying to make my first page, however I am having problems getting my images to show up. I got them to show up on a previous page and now I have moved on to a different page and tried to use the same and it won't show up, I even tested it on another page and it works on there, I don't understand what im missing can someone please steer me in the right direction.
img tags have a property named src. this prop should fill with path of your image. if you use absolute path, it should started with '/'.
imagine that you have a directory named 'public' and a file named 'image.png' in that directory. you can use img tag like this:
<img src="/public/image.png"/>
keep in mind that start slash is referred to the base directory of your project.
to check the path, you can inspect in your html file. open your html file in your browser. right click and select inspect (or you can press F12 and go to inspector tab if you are using firefox or chrome).
find the <img {...}/> element and check it's src prop and path url. keep in mind that the path should open the image. if that's not happening, there is a problem with your path.
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
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.
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 ?
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...