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-->
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'm new to both HTML and CCS (I've just started yesterday night) and have hit a snag. I'm having some trouble with using the id selector in the div; the background image is failing to appear. Please note that external ccs was used and the image in question exists in a separate folder. Also, the code seen below was made using notepad on my Microsoft computer.
Here's what I've got so far:
#banner {
background-image: url("../img/Sunflower.jpg");
background-repeat: no repeat;
background-size: cover;
}
<link rel="stylesheet" href="css/style.css">
<div id = "banner">
Google Search
<br>
YouTube
<h1>First Web Page</h1>
</div>
There are several things that can go wrong:
In your CSS, you used a relative URL. Usually, Images are transfered over the web via HTTP, so usually, we put relative paths only when we use a bundler for JavaScript/Css. I recommend you change your image path to /img/Sunflower.jpg This will make your web-browser request it at <server_root>/img/Sunflower.jpg
Maybe you didn't include the actual CSS path in the HTML file to make the browser actually fetch it. Please check the <link> tag
The code you've written is generally okay, so the problem is with your actual filesystem / understanding of server paths, so I recommend checking those out.
Here's a working example for you:
#banner {
background-image: url("http://via.placeholder.com/300");
background-repeat: no-repeat;
background-size: cover;
}
<div id="banner">
Google Search
<br>
YouTube
<h1>First Web Page</h1>
</div>
Your code is correct and should work. Please consider the following.
1: Make sure you have the correct path of the image. Your path looks good from here, however, it is still hard to say because we don't know where you have saved the image.
2: Check and be sure that you have linked your CSS to your Html file if using the external CSS, or they are correctly placed in style tag if using internal CSS.
Thank you.
are you using inline css or external css file, or make a separate folder to your media and use that objects by giving simple names like img1.png like that
no-repeat instead of no repeat
please remowe spaces around equation marks - I've never seen anybody formatting the code like that
path to the image is most likely incorrect. Bear in mind ../ means one folder up relative to the css file
did you include your css file in HTML file?
Try add this line on header of HTML file:
<link rel="stylesheet" href="styles.css" />
where "styles.css" is the name of your css file. Check if the css file is in the same folder too.
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide
w3-animate-opacity">Lori
<span class="w3-hide-small">Roberg</span> - Web Designer and
Developer</span>
</div>
</div>
/*css code*/
/* First image (Logo. Full height) */
enter code here
.bgimg-1 {
background-image:url('images/flpic.png');
min-height: 100%;
}
I can not get the flpic.png background image to display.I have tried many different urls - such as - ('/images/flpic.png'), ('../images/flpic.png') and the one above. My file structure is HTML5 index.html, style.css and a folder named images.
Try this. I think the property is background
.bgimg-1 {
background:url("/images/flpic.png");
}
With the way URLs need to be structured, try the following:
Current Directory: ./
Back Directory: ../
Forward Directory: /
My suggestion is to use url(./images/flpic.png)
I have noticed something from the link you provided. They have used custom css file. Add the following code inside your if your haven't added it.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
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
I'm working with HTML that was already built; all the pictures will work with my local machine except for the images in the slideshow.
This is the code that works:
<div class="backgroundImage" id="homePageBanner2" style="background:url(http://demandware.edgesuite.net/aajh_prd/on/demandware.static/Sites-beats-Site/Sites-beats-Library/default/v1355443668325/images/homepage/2-seasonal-pill-gap_2400x650.jpg) center 0 no-repeat;">
<img src="http://demandware.edgesuite.net/aajh_prd/on/demandware.static/Sites-beats-Site/Sites-beats-Library/default/v1355443668325/images/homepage/2-seasonal-pill-gap_2400x650.jpg" style="display:none;" />
</div>
This won't, it just shows up black. (Keep in mind this format works for all the other pictures in this html.)
<div class="backgroundImage" id="homePageBanner1" style="background:"../demandware.edgesuite.net/aajh_prd/on/demandware.static/Sites-beats-Site/-/default/v1355443668325/images/MainImage2.png") center 0 no-repeat;">
<img src="../demandware.edgesuite.net/aajh_prd/on/demandware.static/Sites-beats-Site/-/default/v1355443668325/images/MainImage2.png" style="display:none;" />
</div>
"background:"
Could be that you end your style right after you specify background:
You have 2 image references here, one in the markup and one in the CSS style. Not sure, what the point is of that.
If the style argument is really broken in the code, which is what appears to be the case from what you pasted, it is possible that the image sits in the document root and the CSS sits in a subfolder, so that only the relative URL for the background image works if the HTML file is also in the root. The image tag source URL would point to one folder above the root in the hierarchy and that's probably not where the image is. Because the background image CSS is broken in the local version, neither image appears.
style="background:"../demandware.edgesuite.net/aajh_prd/on/demandware.static/Sites-beats-Site/-/default/v1355443668325/images/MainImage2.png") center 0 no-repeat;"
Did you mean:
style="background:url(../demandware.edgesuite.net/aajh_prd/on/demandware.static/Sites-beats-Site/-/default/v1355443668325/images/MainImage2.png) center 0 no-repeat;"
If you are in business manager
src="/images/homepage/2-seasonal-pill-gap_2400x650.jpg?$staticlink$"
if this is in an isml file
src="${URLUtils.staticURL('/images/homepage/2-seasonal-pill-gap_2400x650.jpg')}"
Is the most consistent for all instances (dev, stg, development, and prod)