So I am working on a website and I'm trying to set the background of empty div with a set size and I can't figure out why it isn't working. Anyone see something I don't? Thanks, Tim.
Code:
.headerbg{
width:100%;
background-image:url('bg.jpg');
height:500px;
margin-bottom:25px;
}
<div class="headerbg">
</div>
To prevent such errors, you should define your urls relative to the document root. For instance, if your image is at http://example.com/path/to/image.jpg then you should use url('/path/to/image.jpg'). This removes any possible ambiguity.
There is nothing wrong with your code, when I try it with a different image, it works fine:
background-image:url('http://placekitten.com/100/100');
http://jsfiddle.net/Guffa/bWKBB/
So, the reason for the problem is that the browser can't find the image. There can be several reasons for that, like:
The image doesn't exist
The image exists in a different folder
If you have the CSS code in a style tag in the page, the URL for the image is relative to the location of the page. If you have the CSS code in a style sheet, the URL for the image is relative to the location of the style sheet file.
Related
I am trying to display a specific background image on a div in style or class by using Tailwind CSS but the image in not appearing. I cannot put it as a image since i want it to repeat throughout the div.
`
<div style="background-image: url('/wave.svg');" class="block bg-repeat-x bg-contain bg-center" >
**code**
</div>
`
I have tried to put the url as "../public.wave.svg" but the terminal outputs:
files in the public directory are served at the root path.
Instead of /public/wave.svg, use /wave.svg.
I have also tried it within a class in the div but cannot seem to find the problem to why my image is not showing up. When i put it as a img src it appears but i cannot manipulate it like that.
if you want to find here that simple real problem...
first go tailwind 'output.css' and add here a standart css class like '.addtest{}' with include your background.svg !
add it to your div, and is it works ?
is it don't work ? (find your real problem..)
ok, is it solved for standart css ?
now go and and take that css to your inner tailwind css or direct inline-css to html with 'style'.
are you try "./folder/image.svg"
not "../folder/image.svg"
not "/folder/image.svg"
I have tried to link a path for an image in my CSS several different ways but it won't work is there anything that I'm missing?
background:src="C:\Users\simcity\Documents\HTML\Header.jpg";
It looks like you're trying to set a background image.
In that case
background: url('C:Users/simcity/Documents/HTML/Header.jpg');
would be the appropriate method.
Actually you must not use local paths, but else URL paths so for example:
background:src="C:\Users\simcity\Documents\HTML\Header.jpg"; might be:
background:src="Header.jpg"; if your image resides at the same level of your html document or background:src="/path/to/your/html/and/img_folder/Header.jpg"; if the image is in another folder (the folder must be at the same level of your html)
EDIT:
is background:url('path for the image') not background:src="path for the image"
I think the CSS syntax what you are looking for:
#id {
background: url("C:\Users\simcity\Documents\HTML\Header.jpg");
}
I create CHM help file.
For decorate it I use css and option 'background'.
All my images saved in img.
My css setting for header like this:
.data{
width:100%;
height:80px;
display:inline-block;
background:#fff url(/img/bg_fill.png) repeat-x;
}
HTML code:
<div class="data">Hello world</div>
In HTML everything is OK, but when I make CHM file background does not have background.
Why? Maybe path is wrong? Somebody have simular problem?
That's problem with the img path. I suspect img folder is in the same directory where your css and html files are located. If so, try to remove first slash in image url: url(img/...
Well, I resolve my problem in my self.
During in experement I saw next sequence, when I add image in tag img and ny header is show.
I think whem CHM maked program does't add image into CHM file and all path is wrong. When I add images in div which hide - all resources is add and show my header.
Just simple solution is we just need to provide full path like where the image is located like C:\Documents and Settings\User\Desktop\Images...
I just installed xampp and I brought one of my live sites into it to be able to start working from localhost.
So to view my site, I navigate to localhost/example.com
I noticed some issues with images when on my html, I had for example:
<img src="/new_pictures/05.jpg" alt="Central Market"/>
Image wouldn't show up, but then I removed the / and this works:
<img src="new_pictures/05.jpg" alt="Central Market"/>
I seem to have a similar problem with the CSS background image, but I can't get it to work-if I remove the / there, the image doesn't show up on the live site. How do I make the background image show up on localhost?
Example CSS (works in live site but not localhost):
.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
text-align:center;
float:right;
position:relative;
z-index:1;
}
Thanks!
The image paths in your stylesheet should be where the image is relative to the stylesheet, for example if your .css file is in a directory like this on your site:
/css/styles.css
Your path should look like this (go up a directory, then into images)
background-image:url(../images/feather_email2.jpg);
You can try the base tag - supported in most popular browsers - and then supply paths relative to the href attribute of the base tag. Or make sure you supply correct paths relative to the CSS stylesheet
Try using ./ instead of / and make sure that you are specifying the correct path.
I can't figure out why the image is not resolving inside the div id="header_container"
everything looks ok, the image is on the server,,, what's the issue here?
http://winteradagency.com/mrw/index.php
any ideas?
thanks
When you make a CSS url() directive a relative path, it is relative to the CSS file, not the page the CSS is on. In your case, the header_container directive is:
background-image: url(images/logo.jpg);
Because your CSS file is in /mrw/styles/styles.css, the path that the image is being looked for at is /mrw/styles/images/logo.jpg. You need to adjust your CSS directive accordingly. One of the following should work:
background-image: url(/mrw/images/logo.jpg);
or
background-image: url(../images/logo.jpg);
Background image URL's in a CSS file are relative to the URL of the CSS file itself, not to the URL of the parent HTML page which included the CSS file.
So, to fix your particular problem, change images/logo.jpg to ../images/logo.jpg, otherwise it is trying to lookup the image in styles/images/logo.jpg