I'm getting this error when I inspect the element with FireFox: "Failed to load the given URL".
This is my HTML code:
<body id="page" class="page sidebar-b-right sidebars-1 isblog test">
<div id="maininner" class="grid-box" style="min-height: 1320px;"></div>
</body>
This is my CSS code:
.test #maininner{
background-image: url(images/banderola_amarilla.png);
background-repeat: no-repeat;
display: block;
}
The div "maininner" has information inside it, I just didn't add it as it would take up to much space. I have tried to change the URL of the css image in different ways "../images/" and moving it in different folders just in case but I still can't get the image to show.
What am I doing wrong?
You can check out the site here: Check it out!
The image is suppose to be somewhere by "Noticias
ROSARIO Y OTRA NOCHE MOVIDA NUEVOS CONFIRMADOS EN STARLITE 2014".
Thanks.
Give This
background-image: url("/starlitefestival/images/banderola_amarilla.png");
DONE...
The correct url maybe: ../../../images/banderola_amarilla.png
Related
I would like to set a background image to a div using CSS.
While I can display the image while using HTML <img src="/static/img/fon1.jpg">...
I get a 404 (Not Found) when I try to set the image through CSS:
style="background-image: url(/static/img/fon1.jpg)"\
I have tried different paths like: ../img/fon1.jpg and many others. Also with and withoud quotes.
I am certain that the css and the html are linked correctly as I can set the background to a solid color.
If I use in html, the css elements find and display the picture as well.
I feel like I should resort to just using <img> and rescaling it to fit the window, but I'd like to know what's wrong with the sucker.
Any kind of help / materials / links / jokes are welcome. Thank you if you take your time. All the best!
Folder structure:
project
└─static
└─ img
| fon1.jpg
└─ stylesheet
| styles.css
└─ base.html
HTML
<link rel="stylesheet" type="text/css" href="/static/stylesheet/styles.css">
...
<body>
<div class="background1"></div>
<div class="background2" style="background-image: url('/static/img/fon1.jpg')"></div>
</body>
...
CSS
.background1 {
background-image: url(../img/fon1.jpg);
height: 960px;
width: 1280px;
}
.background2 {
background: red;
height: 960px;
width: 1280px;
}
You missed the quotes in your code.
.background1 {
background-image: url('../img/fon1.jpg');
height: 960px;
width: 1280px;
}
I believe the proble lies in JetBrains Webstorm application. I tried the same configur on another application where I was hosting the server, and then the images were found. Currently I was using Webstorms feature to open local HTML file in browser. Seems that it doesnt support GET requests from .css file.
Update:
When referencing static files in Webstorm Live Edit the path should include the project folder. In my case the img would be located at: http://localhost:63342/projectname/static/img/fon1.jpg
I don't know from which file you are trying to access the image. I am assuming, You are trying from base.html
you are able to add the image like this.
<img src="./img/fon1.jpg">
I have an issue that all beginners in CSS seems to have, my background-image doesn't show.
When I try to put background-color it works, and with image nothing shows-up.
I have put my image in the same folder than my files css and html.
I want to set the image as the background of my <body>.
I use the framework meteor.
Here is the code HTML:
<body>
<div class="Units" id="UnitsSelector">
{{>units}}
</div>
<h1>Test </h1>
</body>
Here is a part of the CSS file:
body {
display: block;
width: 900px;
margin: auto;
color: black;
background-image:url('space.jpg');
}
Also when I use the inspect tool on my browser and I try to open my url I have this error :
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/space.jpg."
The best approach I see here, is similar to these question:
How to serve static content (images, fonts etc.) using iron router
Although you haven't stated that you're using iron router. The answer will be the same.
Instead of doing all this, you can just put the files under your public directory. If you add the file:
app/public/images/space.jpg
You can access it from your templates like:
<img src="/images/space.jpg">
No routes are needed to make that work.
Beware of overlooking the lead slash.
<img src="images/space.jpg">
The above example will work from your top level routes.
Open devtools in Chrome
Click to "console"
You can see error space.jpg not found
See link on error to your image
Search difference between link in error and real place your image (solution 1)
If all good - play with width/heigh/background-position (solution 2)
I know that this question has been asked and answered many times. I have viewed and tested the answers to all of those questions, but still I cant get it working.
I have a div in my HTML Document. I styled it to have a specific height and width. When I give it a background color, I can clearly see it. But If I use background image property, no image is shown.
Here is the HTML :
<body>
<div id="div">
<div id="playButt"></div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<script src="Js/Init.js"></script>
<script src="Js/Menu.js"></script>
</body>
And the Css :
#playButt {
position: absolute;
width: 100px;
height: 100px;
display: block;
background-image: url("Imgs/User Interface Icons/PLAY icon normal.png");
}
My document structure is like this :
HTML5\Project FG\Imgs\User Interface Icons\PLAY icon normal.png
The css file is properly linked with the HTML file and resides at the same level of the HTML file inside the folder Project FG.
What is it that I am doing wrong ? How can I correct it ?
Thanks.
Make sure you file name has not white spaces so convert PLAY icon normal.png to something like PLAY_icon_normal.png.
Also make sure that your HTML is pointing to the right file.
You can use the following list as reference when creating your URL:
/ = Root directory
. = This location
.. = Up a directory
./ = Current directory
../ = Parent of current directory
../../ = Two directories backwards
I am trying to add an image as a sign in button to my website's header. When a user clicks/taps the button, it redirects them to the sign in page. I'm creating a ruby on rails app, and my image is located in "app/assets/images", but I can't seem to get my image to appear.
And I do not want to upload the image to a site such as imgur and link it to my site.
Here is what I've tried so far.
Attempting to link with CSS:
1) background-image: url(../images/sign-in.png) no-repeat;
2) background: url(sigin-in.png);
And I've tried getting it to work with display: block; width:128px; height:128px; position: relative;
Attempting to link with HTML:
<a type="button" class="navbar-toggle btn-signin">
<img class="signin-img" scr="../images/sign-in.png">
</a>
Note: I've tried other methods in HTML too, such as creating <button> tags,<div> tags and<a> tags.
It's a ".png" image, does that play a factor for not appearing?
Try changing the src value of your image to ../../assets/images/sign-in.png.
Your full image element should look like this:
<img class="signin-img" src="../../assets/images/sign-in.png">
Here you are mixing backgound-image and background-repeat:
background-image: url(../images/sign-in.png) no-repeat;
this should be:
background: url(../images/sign-in.png) no-repeat;
Also, in some RoR apps, using MVC pattern, the assets are being referenced from the root level of the app, so you might have to change the paths to the files.
probably you could try removing the "../"?
do you have any other images that are being correctly displayed?
good luck!
I solved the issue! I figured it had something to do with rails, since this only happens when I make rails apps/sites.
Since my html file is erb (embedded ruby), I had to "embed" the image in my html like this:
<img src="<%= asset_path( 'sign-in.png' ) %>" />
Thank you to everyone who answered!
First, make sure it's src not scr.
<img class="signin-img" scr="../images/sign-in.png"> # bad
<img class="signin-img" src="../images/sign-in.png"> # good
Second, open up developer tools (https://developer.chrome.com/devtools) and see if the browser is requesting the image:
images/sign-in.png
It will look like this: (make sure you're in the network tab)
i am using background image for bottom of the header like this
header {
background:url(../img/header_bg.png) #ea6225 no-repeat;
background-size: 100% auto;
background-position:left bottom;
}
My images are in a folder like this Web/img/header_bg.png and css Web/css/style.css
now when i see in browser this image is being loaded but in console it shows error like this
file:///C:/Users/name/Desktop/Web/img/header_bg.png
net::ERR_FILE_NOT_FOUND
same this is happening with ttf fonts used in my project . Will someone help me whats wrong with it ?
According to W3, partial URLs are interpreted relative to the source of the style sheet, not relative to the document. You should set the URL accordingly.
try this:
background:url(../../img/header_bg.png) #ea6225 no-repeat;
You have to add "" like this ("../../img/header_bg.png")
Keep in mind,
<img src="Lanka.jpg"> <!-- Lanka.jpg is in the current folder -->
<img src="Asia/Lanka.jpg"> <!-- Lanka.jpg is in the Asia folder -->
<img src="/Asia/Lanka.jpg"> <!-- Asia folder is in root folder -->
<img src="../Lanka.jpg"> <!-- Lanka.jpg is in one folder up from current folder-->