So i have my website, www.alphenweer.nl, and that uses some images in the template.
Now the images are on the right url, they work fine, but when i load my website the images won't load? You can try it here. Please help, why won't the images load?
Greetings
Ok, so I gave a look at your css :
#header {
border-bottom: 1px solid black;
width: 985px;
background-image: url('http://images.alphenweer.nl/i/header-winter.png');
text-align: center;
height: 250px;
}
Even when I copy the url in my browser, I got a 404, so the image isn't on your webserver.
Ahh no! I found my own answer. I needed to reupload the css files, i forgot =)!
God, i'll understand when you guys are gonna thumb down! =)
if other images are loading and some are not loading on same location then it is due to hyphen that you have in your image name.
Hyphen in names gives problem in many places. Not only in CSS but when access database and table tables, directories and file names etc. So, try to avoid hyphen instead use underscore.
But I do not know why hyphen give problem. If anyone know that, pleas share your knowledge.
Related
I am trying to change my products image on hover in woocommerce in wordpress !!!
I tried some plugins I saw like Woocommerce Product Image Flipper & Magni Image Flip for Wocommerce but they are not working for some reason and I tried the solutions you are suggested here in some similar questions .
So do you know another plugin free or not I dont care or do you know maybe an other solution with CSS maybe I dont know
I am using
Wordpress Version : 5.3.2
Wordpress Theme : Flatsome
Woocommerce Version : 3.9.2
Thank You for helping and sorry for my English :)
ok #st3ph3n92 it is working for me !!!
I just write custom css for the 10-20 products I have online every day so for now I am fine !!!
Now in the future I hope there is plugin to do this job ^^
Thank you again for your help #st3ph3n92
#N. Mar, Yes, the custom URL I used was only as an example. With background-image: url("img2"), that would select img2 if it is the same folder as your CSS file. However, if your images are kept in a separate folder, for example "images", the CSS might be background-image: url("images/img2").
There is a StackOverflow post on folder paths here that might be quite useful: What does "./" (dot slash) refer to in terms of an HTML file path location?
Because you're using WooCommerce, I imagine how you're images are stored is a little different. This article might shed some light on it: https://enviragallery.com/where-does-wordpress-store-uploaded-images/
If you want this to be automatic on Wordpress, you will need to use PHP. The issue is that you cannot use PHP in CSS. Instead, you would need to add the styles inline or in the head of the theme's html (as opposed to a separate stylesheet) and then use PHP to reference the image. This is a good bit trickier. There's another Stackoverflow post on that here: CSS background images in WordPress
if you have access to the CSS, you could try setting the image as the background of the div it is in. You could then use the :hover selector to set a new background image.
You can see this on the CodePen here: https://codepen.io/St3ph3n92/pen/BaopGQx
Or run this snippet:
.image-holder {
height: 300px;
width: 300px;
border: 3px solid black;
margin: 0 auto;
background-image: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
background-size: contain;
}
.image-holder:hover {
background-image: url("https://images.unsplash.com/photo-1514218953589-2d7d37efd2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
}
<div class="image-holder"><div>
I hope this helps.
Thank you St3ph3n92 for your answer
So can I change this code with something like this ???
.product-image {
height: 770px;
width: 1155px;
border: none;
margin: 0 auto;
background-image: url("img1");
background-size: contain;
}
.product-image:hover {
background-image: url("img2")
}
<div class="product-image"><div>
I mean that I want something more automatic cause I have 700+ products so I cant insert custom URLS for each one !!! I need a code so on hover my main Products image change with the second image from Product Gallery
Thanks again for your answer !!!
I had the same issue on some of my websites with the same configuration as yours.
Until a few days ago, I had that flipping effect on my products. It was by default, I didn't install any plugin for this feature. Today I noticed that it's not working anymore.
I managed to solve this issue by disabling Autoptimize plugin. I don't know if you use the same plugin, but maybe my answer will help you.
I would like to edit a separation section on my website to remove an empty space below it, nothing too fancy just basically going from this:
to this:
Seemed pretty easy to me but when I went looking for the css file to edit that class I couldn't find it, the editor tells me it is the (index) file located at the root of the website but I don't have such css file in there.
Any help on where to add the missing line?
Thank you by advance.
Try
.page .page-wrap .content-wrapper{
padding-bottom: 0 !important;
}
If doesn't work reply with website URL.
I already double checked my URL, and the name of the files, but I can't seem to get the image to show up. Why is it like that? Here's my code (take note the <p> is inside the body tags, I didn't add the full code, I only added the head and the specific problem).
<html>
<head>
<title>Head First Lounge.</title>
<link type="text/css"
rel="stylesheet"
href="stylesheet/style.css"
media="screen"/>
</head>
<p class = "guarantee">
Our guarantee: at the lounge, we're committed to providing you,
our guest, with an exceptional experience every time you visit.
Whether you're just stopping by to check in on email over an
elixir, or are here for an out-of-the-ordinary dinner, you'll
find our knowledgeable service staff pay attention to every detail.
If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
And here's the CSS rule for that part
.guarantee{
background-image: url(images/background.gif);
font-family: "Geogia", "Times New Roman", Times, serif;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
line-height: 1.9em;
font-style: italic;
color: #444;
}
Try this:
background-image: url(../images/background.gif);
Without the ../ it is looking for an images folder inside your stylesheet folder which does not exist. So you have to go back a directory where the images folder is located.
Edit: You can also shorten up your CSS styles like so:
.guarantee{
background: #a7cece url(../images/background.gif);
border: 1px solid black;
}
The browser will be searching for the image within your stylesheet directory at the moment.
Might be worth trying changing
background-image: url(images/background.gif);
to
background-image: url(/images/background.gif);
which might be the cause of the problem.
I was having this same problem solved it by adding / to the beginning of the image url
(example: background-image: url(/images/background.gif);)
Hope this helps :)
I know this answer is a bit late but this link will give you a detailed explanation for css file paths.
/ returns to the root directory
../ moves one directory backwards
../../ moves two directory backwards
https://css-tricks.com/quick-reminder-about-file-paths/
FYI This page just helped me figure out the solution to my problem, where I was viewing an html page in my Chrome browser and the main.css was not loading the background image, and THE REASON WAS, because the 'relative link' in the main.css had a / at the beginning, and as someone said above, that goes to the ROOT folder, which on my Windows OS is of course C:, but on the server it is the root for that site which DOES work! So I had to remove that initial / at the beginning of the /images/backgroundimage.jpg link and then it DID work on windows. Now lets see if it works on my server without that slash...YUP!
So it DOES work with or without the / at the beginning of /images/backgroundimage.jpg in my css on this server, but on Windows the / brings it to the root c:\ drive. And btw I used "inspect" in the Browser and the "Console" at the bottom to see the link C:\images... that it was looking for, then found this page with this answer, that beginning / brings it to the ROOT folder.
May be you've used backward slashes (\) instead of forward slashes (/) in the image path.
I did this mistake and was fighting with my chrome browser. I copied the image path from Windows Explorer (which uses backward slashes)
I'm trying to use background image in CSS but even though I gave the full path of the image, it doesn't work. Firebug shows "Failed to load given URL".
I'm sure that there is no permission problem in that folder.
My CSS class is
body {
background: url("H:/media/css/static/img/sprites/buttons-v3-10.png") repeat-x scroll left -800px #DCDCDC;
color: black;
font: 13px/1.2em arial,helvetica,clean,sans-serif;
height: 100%;
position: relative;
}
What could be causing the issue?
You are using a local path. Is that really what you want? If it is, you need to use the file:/// prefix:
file:///H:/media/css/static/img/sprites/buttons-v3-10.png
obviously, this will work only on your local computer.
Also, in many modern browsers, this works only if the page itself is also on a local file path. Addressing local files from remote (http://, https://) pages has been widely disabled due to security reasons.
I know this is really old, but I'm posting my solution anyways since google finds this thread.
background-image: url('./imagefolder/image.jpg');
That is what I do. Two dots means drill back one directory closer to root ".." while one "." should mean start where you are at as if it were root. I was having similar issues but adding that fixed it for me. You can even leave the "." in it when uploading to your host because it should work fine so long as your directory setup is exactly the same.
Source location should be the URL (relative to the css file or full web location), not a file system full path, for example:
background: url("http://localhost/media/css/static/img/sprites/buttons-v3-10.png");
background: url("static/img/sprites/buttons-v3-10.png");
Alternatively, you can try to use file:/// protocol prefix.
source URL for image can be a URL on a website like http://www.google.co.il/images/srpr/nav_logo73.png or https://https.openbsd.org/images/tshirt-26_front.gif or if you want to use a local file try this: url("file:///MacintoshHDOriginal/Users/lowri/Desktop/acgnx/image s/images/acgn-site-background-X_07.jpg")
I've been stuck on this for 3 days now.
I have two pages that basically share some code for a search feature on my website, here's my code
The CSS
#btnSearch {
display: block;
color: #ffffff;
width: 100px;
height: 27px;
border: 0;
padding: 0;
background: transparent url("Images/btnSearch2.png");
}
When I'd gotten the one page working, I copied that code to the page where it doesn't work, but it hasn't made any difference, here's the HTML (don't worry about the inline css, that's just for convenience while I'm working on it...)
EDIT1:
All other classes work correctly as they (along with the css above) come from a stylesheet at <webroot>/App_Themes/Default... The images go in a subdirectory of this location.
I don't see why this code works on 1 page and not the other when all the other CSS classes work on both pages...
Have you tried the absolute image path and see if it works that way?
Maybe it´s a Browser problem: Try to open the file that doesn´t work in another browser.
Maybe you have a tag named the same way #btnSearch in the pages where the styles don´t apply.
Is the path to the background image correct for the page where the code doesn't work? Or even the path to the CSS file?