I'm using middleman to develop a static website and for some reason, the background-image refuses to load. I've done this before many times and I have no idea why It's not working.
Here I set the background image:
.background{
width: 100%;
}
#topbackground{
background-image: image-url("mountains.jpg");
height: 1000px;
border: 1px solid;
}
Here is the fairly simple html:
<div class="background" id="topbackground">
</div>
But no background image loads, as you can see here:
I have no conflicting stylesheets. The only other stylesheet this page is linked to is normalize.css and I've already tried neutralizing that, but it wasn't the issue.
The image is in the right directory, I have refreshed the server; is there any reason why the image would fail to load?
update: I've tried linking the image via an image tag using <%= image_tag "mountains.jpg" %> and it works just fine. It is just image-url in the scss file that is failing.
Found the issue. My css file didn't have the .scss extension required for the use of the image-url helper.
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
I am trying to add background image using css but nothing is displaying in the browser
.right-flex{
margin-left: 5px;
background-color: #deeaee;
padding: 1em 0;
background-image: url("images/christmas-is-coming-christmas-wreath.gif");
}
<div class="right-flex">
<p>Display Image</p>
</div>
I've tried your code (using my own local gif file for testing), it works fine across Chrome, Edge, Firefox and IE.
Just taking a wild guess, is your image folder stored in a different directory? If the image folder is stored under a relative file path, you can try below code (in this case, image folder is one level above):
background-image: url("../images/christmas-is-coming-christmas-wreath.gif");
If you got your gif file from a website, pasting the image link from the website directly into background-image: url() also works.
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.
My code works and display fine on live preview of Bracket but doesn't show when open directly with Chrome or Safari.
HTML
<div class="jumbotron">
<p>we develop <span>brands</span></p>
projects
</div>
CSS
.jumbotron {
display: block;
width: 100%;
height: 665px;
background: url("/img/Creative/bg-final.jpg") center no-repeat;
background-size: cover;
padding: 0;
margin: 0;
}
I simply want my background image shown when open with Safari or Chrome.
Thank you
Brackets live preview creates a local server that's resolving "/img/Creative..." to the root of your project folder. When you open your HTML file in a browser, it's looking for "/img/Creative" at the root of your harddrive instead.
If you need the page to be openable in a browser without a server, you need to use a relative path. So if your CSS file is in "stylesheets/style.css", for example, you'd use "../img/Creative" to reference your image.
"../" takes you up a level in your folder structure.
You are using the wrong code.
Try this - background-image: url("paper.gif");
I know you are using the shorthand code but try this.
Also always put the image in the same folder so you don't have to write the whole long address again & again.
Below is the HTML and CSS code for my sidebar.
<div id="sidebar">
<header>
<h3 class="site-title">The Code Stitchery</h3>
</header>
<nav>
<ul>
<li>Portfolio</li>
<li>Blog</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS
nav a {
background: url(/Images/tape_measure_unit.png) no-repeat;
display: block;
padding: 2px 4px;
text-align: center;
width: 256px;
height: 36px;
}
The background images show up just fine in Eclipse's Web Page Editor, but when I go to open the same page in a web browser, only the text is showing.
I've tried the recommendations from some other posts, including:
Background Image won't show up in CSS unless I load an image using the <img> tag in HTML
Background images not appearing
Background image wont show up
but I'm still stumped.
This is what the sidebar looks like in Eclipse's Web Page Editor:
This is what it looks like in Mozilla Firefox:
Any tips for getting the images to show properly?
You are using an absolute path in the URL of you image (/Images/tape_measure_unit.png), when you access your home.html file from a browser, that path becomes absolute to the drive letter: file:///C:/Images/tape_measure_unit.png. I don't think your image lives there, does it?
Make the path to your image relative to the location of your CSS file (or HTML file if you don't have one). For example:
background: url(../Images/tape_measure_unit.png) no-repeat;
/**NOTE THE PERIOD BEFORE THE SLASH.**/
Note that, once you have all this deployed to a web server, an absolute path may make sense. For example, if your web server has a root path that corresponds to your local codestitchery folder, then your image path will work.
Your code appears to work to me:
http://jsfiddle.net/GzzWU/
Are you sure that the browser is not caching an old version if your CSS content? That's a common issue when testing/debugging this sort of thing. Doubly so if you happen to be testing in IE (though Chrome and Firefox are both pretty aggressive about reusing a cached stylesheet instead of downloading the updated version, as well).
If it's not that then perhaps it's an issue with your image URL. Have you tried pointing a browser directly at http://<your server>/Images/tape_measure_unit.png and making sure that the image comes back?