So, I'm planning to give a div a background image.
Here's the path for the picture i want to use :
website\images\logo.png
And here's the path for the html and css file :
website/index.html
website/style.css
Here's the html code :
<header>
<div class="logo"></div>
</header>
Here's the css code :
header .logo {
width: 45px;
height: 40px;
background-image: url('../images/logo.png');
}
But the image still won't display in the background of the div and instead I get this error when i inspect and click the consol tab :
Not allowed to load local resource:
I also tried different variations such as :
background-image: url(../images/logo.png);
background-image: url(./images/logo.png);
background-image: url('./images/logo.png');
background-image: url('/images/logo.png');
background-image: url(/images/logo.png);
background-image: url('images/logo.png');
background-image: url(images/logo.png);
and all of them doesn't seem to work
I also tried to give the div a background color and it seems to work just fine.
What is the solution? Thank you
I think this might be the issue with getting source from localhost, if you are using VScode then try installing this extension called Live Server May be, it could fix the issue. take a look: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Related
May I ask on how to add photo background on my website using VS Code?
I tried checking in yt but its not background, it just add up to my website as photo alone.
In css:-
background-imge:url("");
i think this maybe helpful for everyone.
using css background-image: url("url") // it is the best practice
but you will have to also set some addtional css properties like
.div{
background-image: url("../images/demo.png");
background-repeat: no-repeat;
background-size: 300px 400px;
background-origin: content-box;
background-position: center;
}
try these
the url can be a link to some hosted image file or
it can be a local image as showed in the example try these
Accept the answer if this helps
how to put backgound image with help of css.
When an image file is stored locally on a desktop, CSS file and image are in the same folder. \Desktop\New folder\image:- image destination
\Desktop\New folder\css:- css file destination
You can provide just the local image name, assuming it is in the same folder and your css is applying then this should help you:
background-image: url("image_name.png")
use background: url() in css for this
body {
background: url("https://www.w3schools.com/howto/img_fjords.jpg");
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
Technically, local files are not accessible from CSS. All the file you want to access should be accessible using URI.
I have a HTML page that tries to display some icons from a sprite image.
I added the css file, and also put the sprite image in the current working directory. For reference, one of the icon has the definition like as shown below,
.locicon{
background-position: -61px -110px ;
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Problem: However, when the page is loaded, the icons are not getting displayed.
When inspecting on chrome and firefox, I can see the sprite image, and this is the runtime definition of the class locicon :
.locicon{
width: 20px;
height: 20px;
background: url(htsprite1.png) no-repeat;
}
Everything except the background-position. Why is it happening like this?
I checked if this property is overriden somewhere and couldn't find any such instance while inspecting on the element.
Note: Before posting here, I even tried with a plain HTML file , including the css file, and tested, still the same issue .
background-position is getting removed at runtime!
Note: The Sprite wont appear in my case even after resolving this because of this linked issue, which is rectified now : Just for reference: CSS sprite not appearing in Firefox, but displaying in Chrome
You background-position is overwritten by background. Try to set the background-positionafterwards:
background: url(htsprite1.png) no-repeat;
background-position: -61px -110px;
A cleaner solution would be to set the background properties separately:
background-image: url(htsprite1.png);
background-repeat: no-repeat;
background-position: -61px -110px;
I don't know why but my browser (firefox) don't show me my background-image, when i put it on html it works.
my editor : sublime text 2
i use MAMP too.
my css code :
.home{
background-image: url('bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Can you help me ? Thanks
Rémi
I think the other answers/comments are on the right track. My guess is the image is not in the right relative path to the style sheet. If your CSS file is in a folder off your web root such as http://example.com/css/site.css, then the browser is going to look for the background image at http://example.com/css/bg-img.jpg ... which would be a pretty odd place to put it.
Try putting the full path to the file in your css...something like this:
.home{
background-image: url('/images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
(And make sure that bg-img.jpg actually lives in /images/, of course!)
I give even odds of that fixing the problem.
If it doesn't, open the page in the browser, right click and choose "Inspect Element" or similar. Then you can dig around and see if your css looks like you expect it to, see if you're getting any 404's returned, etc. This should lead you very quickly to the problem.
Failing all that, try it in a different browser.
BTW, I don't think this could have anything to do with Sublime.
ps. If you're still battling this, please edit your question to include the full css file and html and a link to the live page.
1-perhaps your div.home is empty so not enough height to display it .(for example use height : 200px to see it)
2-another reason is about your img url . if its in a folder like images you should try this
.home{
background-image: url('images/bg-img.jpg');
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
if you want add background-image in sublime...
body {
font-family:arial, helvetica, sans-serif;
font-size: 10px;
background-image: url(../images/background.gif);
}
I'm using Bootstrap with Rails and can't get the brackground color and image to show up together. I have a custom CSS stylesheet where I'm trying to edit the body to have a dark background with a small image in the bottom right corner, like this:
body {
padding-top: 55px;
background-color: #2e2e2e;
background-attachment: fixed;
background-image: url('waves.png');
background-repeat: no-repeat;
background-position: right bottom;
}
Problem is that the image doesn't show up, just the background. If I remove the 'background-color' it shows up and looks perfect, but I can't get them together. I know I'm missing something small (probably stupid too). Appreciate the help.
Have you tried this way?
body {
padding-top: 55px;
background: #2e2e2e url(waves.png) right bottom no-repeat;
background-attachment: fixed;
}
make sure the file extension is .css.erb
body {
padding-top: 55px;
background: #2e2e2e url('<%= asset_path('waves.png') %>') fixed no-repeat right bottom;
}
Not sure about the environment you're in, but have you tried !important ? It adds priority in case there are styles with different values applied somewhere later in code.
body {
...
background-color: #2e2e2e !important;
background-image: url('waves.png') !important;
...
}
Try to put the waves.png file in /assets/images and replace url('waves.png') with this:
background-image: image-url('waves.png');
I'm assuming you're using assets pipeline and your CSS file is preprocessed by Sass (the stylesheet filename ends with .css.scss), for more information I suggest you to read the Asset Pipeline Rails Guide.