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?
Related
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 :)
My svgs as background-image or even background is not showing up in GitHub pages. They seem to be working locally though. I used sass as a preprocessor for css, if that's relevant.
Can anyone help me debug this. Your help would be appreciated!
Project link
Github repo
your background-image must look like this.
background-image: url(../images/pattern-hills.svg), not that
background-image: url("/images/pattern-hills.svg"),
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'm trying to create a little HTML5 mobile game. To avoid any problems with screenresolution I'm using .svg as backgroundimages. While working on the local server the images don't get displayed on the final server: http://tangera.bemoredifferent.com/. It would be great if anybody has a solution for this problem.
Daniel
If you like to use .svg file as background, you must add below code in your stylesheet
background-size: cover;
Reason why, see the documentation https://developer.mozilla.org/en-US/docs/CSS/background-size
Demo here: http://jsfiddle.net/robertc/c9LgV/
Good Luck !
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.