I tried lots of different ways and nothing is showing up, I never use Brackets environment and I'm facing this issue. I added my URL image background but it isn't showing up. Does anyone have an idea?
Maybe the url is wrong, you are in the folder image so you just have to write it like this :
background-image: liner-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6), url(sawirl.jpg))
Related
I'm trying to get my HTML code to work for an email template I am making, and I finally got it to where my background shows for Outlook, however, I am now having problems to where my images above the background is not showing. Whenever I test it to see if the code is working as is, I get a red X where the image should be. I thought perhaps because I have the Trust Center settings not downloading on my email, but when I unchecked it, the images still didn't show up.
Example of what the image shows up as:
This is the code I have for the following in html:
Thank you to anyone helping me out with this!
I am trying to use a background-image using a "root-relative" path like so : background-image: url("/img/bg.jpg");.
The property is correctly showing in Chrome but the image does not appear. If I change it to be http://localhost:8080/img/bg.jpg it appears.
If I visit http://localhost:8080/img/bg.jpg the image is visible.
If I add a <img style={{width:"100px", height:"100px"}} src="/img/bg.jpg"/> it also appears properly (I am using React).
I browsed SO for a moment and noticed several people having issues with url but none of them was similar.
In case there is any kind of link, I'm using Less with webpack-dev-server. The image is in a static directory.
I finally managed to fix this issue thanks to issue #2248.
I simply disabled the source maps for css-loader and less-loader and that made the trick.
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
first time poster and html noob here.
For a few hours now ive been trying to use a background picture. I downloaded an image I wanted to use, and set about trying to code it.
No matter what I tried, the image would not display. However, when I tried one of the other images I was using, it displayed just fine.
I tried using just the first letter of the existing image, and the program immediately suggested the image in a dropdown, as well as several other images with names starting with the same letter. However when I tried to use the new images first letter, it did list options, but none of them were the image I had downloaded.
I tried renaming the image, but still no luck.
I havnt included any code just yet, since this seems to not be related to the code itself (Since other images display just fine). Has anyone run into something like this before? Extensive google searches did not yeild anything for me.
In case it matters, I am specifying the background image as part of the Body css.
Thanks in advance for any help.
Please check to ensure your preferred image is located in the same parent folder as your htlm.
As #Patrick Falvey says but if the picture is not in the same folder remeber to / before your file path :)
I'm creating a web site and the site consists of a few images. Locally, everything displays correctly, but when I upload it to my server, some of the images are not displayed. None of the GIFs / Animated GIFs are displayed at all and some of the jpeg images are not displayed (while others are OK). The only images which don't appear to be effected are PNG, which display OK.
If I check FireBug and hover over the image link, I receive the message Failed to load given URL.
If I enter a direct URL link to the image on the server, the image is downloaded so it's definitely there.
Here's my CSS:
body {
background-color: #000;
background-repeat:no-repeat;
background-position:top;
background-image:url(../images/background2.gif);
}
I created another web site using the same code, but with a different background.gif image and everything displays correctly, so I'm not sure what else is different?
Also, I have tried deleting the images from the server and re-adding them, but still no luck.
Try putting in the full path in the url:
e.g. background-image:url(http://www.your-site.com/images/background2.gif)
-if that works, then check your paths and make sure the css url matches your directory structure.
Instead of using:
background-image:url("../images/background2.gif");
Use:
background-image:url("/images/background2.gif");
Starting with "/" moves to the root directory and starts there
Starting with "../" moves one directory back and starts there
(also it's a good practice to always include quotes on paths)
Thanks for everyone's help, its turns out that this was a problem with some sort of bandwidth restriction on my work internet. If I viewed the site from anywhere else the images were all loaded..... I really though I was going mad for a while! Thanks again.