So my header image shows up when I open Chrome from my code editor (webstorm) but after I close webstorm and open index.html manually from my project folder, the header image won't load/show up, background-image: url("/assets/heroimage.jpg"); any idea why?
Same problem on github when I host my website
Thanks
Have you tried with a "relative path" adding a point at the start?
background-image: url("./assets/heroimage.jpg");
as mentioned Here the problem is with how you linking the image to the CSS.
Try removing double quotes and removing unnecessary backslash:
background-image: url(assets/heroimage.jpg);
or
background-image: url(./assets/heroimage.jpg);
Hope it helps :)
Related
This is the folder where I save my image:
G:\xampp\htdocs\b2w\wp-content\themes\bootstrap-to-wordpress\image
in the stylesheet I write the code for background image like:
background: url('/wp-content/themes/bootstrap-to-wordpress/image/bg.jpg') 50% repeat fixed;
It doesn't work. I'm new to wordpress. Can anyone please help about what the wrong I'm doing here?
I just read a lot in online and get the answer to my question. The answer is "I have to write my URL in the order as it starts from where my stylesheet is located. This is only for the background images."
i have a stupid question,
I want to load background image with the background-image: url(images/background.jpg); function but css file location is css/main.css.
how to do that?
Thanks.
background-image: url("../images/background");
../ puts you one folder back, if for some reason, you would need to go two, use ../../
Also make sure to include extension (jpg/png) of the background image.
I tried to include a background image on my landing page. My CSS file is here:
/modules/core/css/core.css
My image file is here:
/modules/core/img/image.jpg
In the css file I tried doing this:
background-image: url("../img/image.jpg");
I also tried doing this:
background-image: url("core/img/image.jpg");
However, none of them are working or the solutions I looked at this site for other similar questions. Anyone knows how to fix this?
if CSS /modules/core/css/core.css and image is /modules/core/img/image.jpg,
background need be background-image: url("../img/image.jpg"); but are you sure is jpg or JPG, sometimes this can be bug :)
Check the network tab in inspector to see what happens when the browser tried to load the image. What do you get in the status column?
I am building a meteor application for the first time and have run into some issues. In particular, I'm trying to get a picture viewer to work but the right and left arrows in the navigation buttons seem to be missing. When I attempt to load the images that are supposed to be in the button using google's developer tools, it's being displayed as an empty image. Thus, it's probably a case of me not putting the image file in the appropriate directory and as a result meteor is not able to load it in the css file. I'm not sure if this is the case or it's something else. It's probably not any syntax errors as I'm able to see the arrows in the button when I run the plugin outside of meteor.
Here's the line in my css file:
background: transparent url('themes.gif') no-repeat left top; margin-top: -45px;
So I managed to get it to work. I created a resources directory in the public folder and changed the url in the css file to url("/resources/button"), which seemed to do the trick.
You can leave your CSS as it is and put the themes.gif file in the /public directory of your Meteor app -- then it should be accessible.
Per the docs:
Lastly, the Meteor server will serve any files under the public directory, just like in a Rails or Django project. This is the place for images, favicon.ico, robots.txt, and anything else.
You have to prefix a / in front of your file name.
my web site architecture
body{
background-image: url('image/back1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
Files need put to /public directory and remove "/public" in path from css.
For example:
If Image in path - /public/img/logo.png
Then use below CSS :
background-image('img/logo.png');
I'm having a problem where I have a background image that will show up perfectly fine when I'm using it in dreamweaver, but once I upload my site and the CSS files and everything it won't show.
Here's my CSS code:
.ELSsubbg {
background-image: url('../images/NTG_images.jpg');
background-repeat:no-repeat;
background-position:top left;
}
Any help would be great.
Because you are using a relative path in your CSS, where the stylesheet is looking for the image may be different than where you are seeing it when you go to it directly in the browser.
Try using an absolute path to your images directory instead of a relative one. Assuming you can see the image in your browser at http://www.website-name.com/images/NTG_images.jpg try removing the dots to make the path absolute from the root of your website.
background-image: url('/images/NTG_images.jpg');
Have you uploaded the image? Have you uploaded it to the right place? Is the CSS looking for it where you think it should be?
The easiest way to answer these questions is to use the browser's developer tools (eg Firebug) to watch the network traffic your page generates. Look for the request where it tries to load the graphic. Is it giving a 404 error? Probably.
If you are getting a 404, look at the URL it's calling to find out why. The answer should become clear.