Okay I cannot figure out what's going on as it works fine on my computer, yet when I try it out on my hosting, it doesn't wanna cooperate. My website is http://kamecomputers.com/ and the issue is in the little circles where I'm supposed to have some icons, now on my computer they work fine, but I just doesn't wanna work on the hosting. enter image description hereAnyone got any ideas?
Your links to the images are broken. Here is what you have:
background: url(\Images\wrench.png) no-repeat center;
width: 100%;
height: 100%;
You are using a backslash (\) when you're likely wanting to use a forward slash (/).
http://kamecomputers.com/Images/wrench.png
Related
I have this JPG image that I am trying to use in CSS as a background-image for a div container. All different images I have tried work, but this one just wont render in the viewport. If I go to inspect element, it shows the thumbnail when I hover over the elements URL.
I have tried everything including:
Putting it in an img tag and giving it a static height/width
Converting it to png and svg'
Compressing it
Scraping the metadata
Using it in a different HTML/CSS file
import image from "./image.jpg";
//using React.js
<img src={image} className="image"/>//<-- doesnt work in img as src
<div className="imageBg"></div> //<-- doesnt work in div as bg
.image {
height: 100px;
width: 100px;
}
.imageBg {
height: 100px;
width: 100px;
background-image: url("./image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Here's the culprit: (its just a 2000x2000 729KB .jpg mockup image edited in photoshop)
Is there something wrong with this image?
If you guys dont believe me, heres the bug in action: codesandbox.io/s/hardcore-kare-212iuy?file=/src/App.js
It works fine when I open that in an incognito window, but if I open it in a regular window…
… the file name in your live example (although not in the code you included in the question) ends in ad0.jpg which is a naming convention that triggers common ad-blocking algorithms.
Don't call it that.
Moral of the story: If an image isn't loading then look at the Network tab of your browser to find out what happens when the browser tries to load it.
There is a high chance of the Image getting Corrupted, try doing a small edit in any editing software (photoshop, or even system default apps) and save it again and try using it!
You can also simply take a screenshot of it and try using it in your code
If that doesn't work, you can use this link https://i.stack.imgur.com/LGYHM.jpg in your src as a string, this is the image uploaded to Stackoverflow's drive and test it for time being! if that works as a permanent solution create an account and Try Uploading it to a Cloud Assert Provider like Cloudinary and add it as a Link in the src
Imported all the folders of my code for my website from VS Code to my repository in GitHub. It is a very simple website using HTML and CSS only, as I am still only a beginner. Two background photos aren't showing when I do the preview of my page from GitHub. Other photos I used in HTML show without any problem. I found similar questions and tried to do what people advised, but I can't find a mistake in the relative paths I used. They look correct to me, I have no idea what else I could change. Here is the link to my GitHub repository:
https://github.com/Karito84/Tea-Cozy-Project
In the styles.css
.mission {
height: 43.75rem; /*700px*/
max-width: 75rem; /*1200px*/
background-image:url("../Images/img-mission-background.webp");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
flex-direction:column;
justify-content: center;
margin-top: 69px;
}
The above background-image doesn't show when I preview the website, but in my in VS code on my computer it all works and my website has all the photos.
When I open the Image folder on GitHub the images are there and display when I view them. I also tried changing my path to url(".Resources/Images/img-mission-background.webp")per another person's suggestion but it doesn't change anything.
Your relative paths are wrong. It should be url("./Resources/Images/img-mission-background.webp").
So I just finally figured out how to make my background images work. Instead of relative path I used absolute path and the background pictures are finally showing up!
background-image: url("https://raw.githubusercontent.com/Karito84/Tea-Cozy-Project/master/Resources/Images/img-mission-background.webp");
but if someone can tell me what the relative path to this picture is, I would be very thankful!
I am currently building a website and ran into a issue with my code. I am trying to set an image as a background for my header. I have checked the path to my image, the spelling of everything, and have checked my syntax online. Everything seems to match, so I don't understand why my image is not popping up. Any help you guys can give would be amazing. Thank you. Below is my css code:
header {
text-align: center;
background-image: url("image/concert.jpg");
background-size: 700px;
height: 333px;
width: 500px;
}
In addition to what other people already commented on your question, it is worth noting that the filepath must be relative to the css file's location.
Say your entire project is in a folder named root, and css is located in root/css/styles.css but image is in root/image/concert.jpg, then, from your stylesheet, you should call the image like background-image: url("../image/concert.jpg");
Like #David Alsbright said, you should check the development tools console of your browser. It will help you determine if there's a problem with the file path.
This page renders correctly in every other common browser except Safari. (Yes, it's a mess, I haven't finished the site yet) Safari quickly displays certain elements, then replaces them with white. In particular background images (or colors) in the body tag and , also text in a paragraph tag.
http://sr.hi-speedinter.net/staging/
Yet similar code works on the homepage http://sr.hi-speedinter.net where the body background image displays correctly.
I'm baffled! I've searched for about 2 hours and tried lots of tweaks but nothing has had any effect.
Here's some of the CSS
body.src-sub-page {
background: url("http://sr.hi-speedinter.net/wp-content/themes/twentyfourteen-child/images/sub_page_bg_tile.jpg");
background-color: #edeff3;
background-position: top;
background-repeat: repeat-x;
}
.src-sub-page .site-main {
background-image: url("http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png");
background-position: top center;
background-repeat: no-repeat;
}
Any ideas where I'm going wrong?
Did you search for Safari bugs? And what happens if you disbale the rest of the CSS?
Is JPG and PNG not working?
Did you try background instead of background-color?
Did you try it on another PC?
Also try to change these
http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png"
to
wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png
Thanks Gintoki, I had actually tried most of those, but the real problem turned out to be Safari for PC. I found someone nearby with Safari on a MAC and the page worked perfectly.
But for anyone else having similar issues, I highly recommend trying those steps above. Good to have it in one list!
I'm a very newbie to CSS/HTML and I can't seem to fix an issue I have.
This is the website I'm developing http://sahsahashas.tk
Now, when I preview website over Dreamweaver in chrome this is how navigation bar looks (the way its supposed to)
http://i.imgur.com/4dw1j6K.jpg (it is actually a picture, not a background color :)).
I know it looks almost the same but it really annoys me. Also, I know my CSS code is a mess but again, I'm a newbie.
.navbar {
width: 708px;
height: 61px;
margin: auto;
background: url(navbarr.jpg);
font: normal normal 700 1em/4em Arial,sans-serif;
z-index: 2;
}
You have a typo: background: url(navbarr.jpg); should be navbar.jpg or your image navbarr.jpg doesn't exist on the server. There is an image called navbar.jpg. Hope this helps.
Look at css in my firebug: http://i.imgur.com/Vdi0hfZ.png
to specify the image as background you should not use only background,
I will suggest you to specify the background-image attribute and image name with valid path should in single(or double) quoted..
background-image: url('navbarr.jpg');