I have a background image that I want to repeat across (repeat-x) however when I try to view the page, nothing shows up. I'm also using javascript to use a different CSS file for different times of the day, however I am sure that is not the problem because firebug shows that the CSS file was added to the head.
Edit: The problem is that the browser cannot find the file, however when I attempt to link to it, it still cannot find the file.
You can download the archive of the site here:
http://cdn.duffcraft.net.adam543i.net/sitebkp-1845.zip
Its only 200 or so kb. Nothing massive.
As there is no text in your header the div will not get displayed.Try following css
#header {
background-image:url(img/night/night-time-tile.png);
background-repeat:repeat-x;
position:absolute;
height:100px; // Adjust height according to your image height
top:0;
left:0;
}
And you are sure the path to your image file is correct? Does Firebug load the image?
Your file structure is probably like this
index.html
css/
style.css
img/
night/
night-tile.png
Now, from your style.css you have to use a relative path to your image file. So not img/night/night-tile.png but ../img/night/night-tile.png. In your path it is looking for the image within the css directory, which is wrong.
==Update==
After downloading your code I found 2 more errors.
The first is that you forgot to add rel=stylesheet to the <link> element in which you link to your stylesheet. This way, browsers will not know it's a stylesheet.
The second is that you forgot to add a ; at the end of your first rule in your night.css, resulting in a parse error which causes the background rule not to be rendered.
Good luck fixing these issues!
If you have the Chrome browser, inspect the element where the background image should appear.
Hover over the background-image declaration in the firebug window
background-image:url(img/night/night-time-tile.png);
and you will see the full path of the image.
In the screenshot you can see the equivalent for the stackoverflow logo at the top of the page.
You can then click on the css declaration and change the url until you find the correct path for your image.
The element has no height (either explicit or from content).
This means there are no visible pixels of the element to see the image across.
Related
I am creating an web-application using node-webkit, which bases on googles chrome browser.
When embedding a pdf file on a site, using the embed tag, ich get a white line on the top of the embeded part (picture attached). My first thought was, that it is a kind of border, but setting border = 0 dont resolves the problem.
My suggestion is, that this white line is part of the background of the embed part and adobes pdf plugin doesnt covers the whole embed area.
Edit
If my suggestion is true, then it would already help me if i could switch the background of the embed area to an other color. But setting background-color doesnt works too.
Margin and padding has to be set to 0 on the html/body.
If you add:
body {
margin:0;
padding:0;
}
That should sort your problem out.
try to use <iframe></iframe> tag. set the source of your file in src atribute. you can set the height or width of iframe tag as you set your embed tag.
example : <iframe src="http://example.example/file.pdf" width="500" height="400"></iframe>
or you can set the application to open the file you attached to your website
might it help! :D
I have tried different options and also the ones posted on stackoverflow. But nothing seems to work. I have logo.png file in /public/images and a custom.css file in stylesheets.
I want the background of every page to be logo.png (full screen)
I tried the following after searching a lot. But i got nothing. The background is just blank.
Please help
body{
background: url('../images/logo.png') repeat-x ;
text-align:center;
color:#fff;
}
You definitely do NOT want to use repeat-x
To illustrate why, Use the following link http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image and paste the code below and see what happens, then remove the repeat-x and see the results
<html>
<head>
<style type="text/css">
body {
color: white;
background:url('paper.gif') repeat-x;
}
</style>
</head>
<body>
<h1>Hellos World!</h1>
</body>
</html>
If your image is not displaying after remove repeat-x, it will most likely be a path issue (as others have already pointed) out or a bad image.
The only other thing is if there are other classes/divs defined in your css that override the background property that you have set in the body text. Others have suggested you use firebug. I have to whole heartedly agree. Firebug is pretty essential when dealing with HTML and CSS issues.
Firebug is available to Chrome and Firefox browsers (Firefox as a plugin, Chrome by default) but I'm unsure of other browsers.
Instead of repeat-x put repeat.
Other than that check if the path to your image is correct.
Path problem ? ^^
Can you see your image if you just navigate to it ? If not try to use firebug to see what is the problem and to solve it easily.
Full Screen background image :
I found an interesting article on css-tricks may be usefull, the author offers some solutions.
There's a JQuery plugin I've used for full screen background images, and it's called bgStetcher. You can use it to stretch background images to fill the screen. Such a thing cannot be done in CSS.
I'm working on a site at the moment, and an image that is used as the background for a submit button (current the button is normal HTML button, but will be changed to an asp:Button when developed).
Another developer pointed out that this button seems to have a white background. Thinking the image wasn't saved correctly, I opened it up in Fireworks and the PNG image had a transparent background. I exporting the image again, saving it as a PNG-32 image, and overwrit the original image with the new one. The image still appears the same.
Bizarrely, this occurs in Chrome, Firefox and IE 7/8, and the other images on the page don't have white backgrounds either.
Also, I have checked the CSS and there are no styles that contain a white background colour element.
Any one got any ideas?
Many thanks!
Due to the site being built in ASP.NET, changing the button to be an linked image and using JavaScript on it then isn't an option.
However, on the developed ASP.NET site, this issue is also occurring. But I've managed to fix it in ASP.NET by doing the following:
When calling the button, I've typed this out to begin with:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" />
Adding the parameter "BackColor="Transparent" removes the white background from the button. So the tag now reads as:
<asp:Button ID="GoBtn" runat="server" CssClass="searchbutton" BackColor="Transparent" />
This removes the white background in ASP.NET. At a total loss to explain why the button has a white background on it. Although I have read that using a GIF could solve the problem, but I haven't had time to see if this is true or not.
EDIT (24/01/2010)
I found out how to fix this issue in the HTML document, by pure accident!
What you need to do, in the CSS you have to call the following:
background-color: transparent;
border: none;
This removes the grey/white background on the back of the button, and it also removes the border of the button.
try adding
border: none;
to your button style.
I think if you have already tried setting:
submit{background:none;}
and such. Then you should try changing the submit to be just a link with an image instead and calling it via a javascript, I'm thinking it's the button type that does it.
Edit (20th Jan):
I expected that some ASP would solve it (I can't really stand when something like ASP has to interfer with the layout of anything).
If you want to solve this for your HTML version I think you should provide a link or copy it into a fiddle, because it's probably easy to find out what's causing it. My bet is on some inherited style you can't overwrite. Sure you're not using !important or such anywhere in some generic styling?
It's kinda weird :D
check this fiddle out ..You could try to set to that input background the url of your image and just see what happens (if it's public..or you can upload it on imageshack), so we can exclude that there's a prob with that particular image
I have a background image set to my main div. The background image shows up fine in Chrome but doesn't show at all in IE. Any ideas on what would cause this?
<div class="container" style="height:900px; margin-top:0px; background-image:url(Images/bg-stadiuminner.jpg); background-repeat:no-repeat;;">
Thanks
The only thing that I can think of that could be causing this is that the JPEG file is in CMYK format rather than JPG. IE can't digest CMYK images.
I think a layout issue might be more probable, though. Are you 100% sure the DIV is stretching to where you expect it to stretch? What happens if you set a background colour?
A few thoughts:
You should really opt for a stylesheet instead of embedding styles right into your div.
Your background may not be showing up because you never properly close your <div> with a </div>. Also you have an un-needed semicolon at the end of your style, but that probably wouldn't break anything.
.container {
height:900px;
margin-top:0px;
background:url(images/bg-stadiuminner.jpg) no-repeat;
}
<div class="container">
</div>
This would be a better way - try using classes rather than inline styles where possible to make maintaining the code far easier.
you also had a double ;; which may very well confuse IE.
Is the relative url available for both browsers? Attempt to plug in the url for your image in IE and see if you can even load the image from the attempted url.
Don't you need quotes around that url?
style="background-image:url('paper.gif');"
You are using inline style and also using the class 'container'. In the inline code there is no problem except there is ';;' at end of the line. We cannot see what is there in the container class. The problem might be there in the container class
I have this in my CSS file:
body {style.css (line 3)
background:#CDF8FF url(images/final_bg.jpg) no-repeat scroll center top;
clear:both;
font-family:Arial,Helvetica,sans-serif;
margin:0;
padding:0;
}
That images exists, as I can get to it via the browser, but it is never displayed to me! What is wrong?
I use firebug to see if its there, every time I put my mouse over it, firebug just shows a loading icon to indicate its not there.
Thanks to anyone that can clear this confusion.
Btw, I have cleared my cache several times! I am using Firefox on my Fedora Linux box.
Odds are that the specified image doesn't really exist.
A common mistake is to place an HTML document at:
http://example.com/foo.html
with a stylesheet at
http://example.com/css/style.css
referencing an image at
http://example.com/css/images/final_bg.jpg
but actually putting the image at
http://example.com/images/final_bg.jpg
URLs in stylesheets are relative to the stylesheet, not documents which reference that stylesheet.
Move the image, or change the URL (to start with a / in the above example)
If you use relative URIs in your stylesheet, you need to make them relative to the URI of the stylesheet.
So if your stylesheet is in /css/style.css, you need to use ../images/final_bg.jpg to reference /images/final_bg.jpg correctly (or you use the absolute URI path /images/final_bg.jpg).
It's a relative URL. Should it be /images/final_bg.jpg?
Look at your web server's access log and see what's being requested.
Also, in Firebug, look at the network traffic -- are you seeing the request you expect and a success response (200)
Edit: corrected based on David's comment
try using an absolute path, especially if your css is in an external stylesheet.
url(/images/final_bg.jpg)
If that does not work try adding quotes
url('images/final_bg.jpg')
Hope this helps!
I bet on ../images/final_bg.jpg:
background:#CDF8FF url(../images/final_bg.jpg) no-repeat scroll center top;
you need to put the path inside quotes:
background:#CDF8FF url('images/final_bg.jpg') no-repeat scroll center top;