Body background doesn't work in FireFox - html

I've used the following code for background image of body tag.
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
it works in IE,Opera and chrome but doesn't work in FireFox.
I've tried also :
background-image: url("images/taling.gif");
and
background-image: url('images/taling.gif');
but it doesnt work on FireFox

your document body is height=0, and width=0, if you try to give it some height or width the image should be displayed

There is no problem with your CSS. What the problem is most likely the result of is either you are not assigning a width and height to the body tag, you are naming your image incorrectly, using the incorrect extension for your image, or the path to your image is incorrect, but there is also a possibility that you need to add a width and height.
If you use Firefox, you can test what is going on by using Firebug. You right click, and choose inspect element. Once done, in the right column of Firebug, you can see your declaration for background-image. If it says image not loaded or cannot be found, then one of the three things I pointed out above is the problem.
I know you said that the image does show up in other browsers, just not in Firefox. So, consider some modifications to the rest of your CSS. You may not be specifying a browser reset.
Just FYI, you can condense your CSS by doing the following:
background-image: url(images/taling.gif);
background-repeat:repeat-x;
background-color: #2E2E2E;
to
background: #2e2e2e url(images/taling.gif) repeat-x;
As for the body tag, you may want to add these properties and values:
margin: 0;
padding: 0;
width: 100%;
height: 100%;
Google "CSS browser reset"
One example of a browser reset is the following:
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
The above is the most simple browser reset you can have. It does not take into account ul,ol,li,h1,h2,h3,h4,h5,h6,li,p,a,img,blockquote, etc.
Also, look into using a clearfix.
I could ramble on and on as to why you may be having this problem.
I hope that helps.

Try:
background: url('yourimage.ext') repeat-x;
It works for me.
Edit: to match what you're doing, it should in fact be:
background: #2E2E2E url('images/taling.gif') repeat-x;

Related

background image not showing on my page

I have the image in the correct folder but I want to add a text box on top of an image and I was told the best way to do it is make the image a background image, but when I followed a tutorial it never appeared?
anyway here is my html
<div class="module">
<h2>blah blah</h2>
</div>
and my CSS
.module {
margin: 10px;
width: 1530px;
height: 717px;
display:block;
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 100px;
left: 100px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px PTSans;
}
the image is full width of the screen so I am using container-fluid in bootstrap and the text box will be in the middle of the image.
You may call the local file as background like this:
background: url("file://PATH-TO/file.jpg");
Keep in mind that the string inside parentheses should provide a URL to the file.
Also, you have the option to put a path in it.
background: url("PATH-TO/file.jpg");
Change the backlashes. From this...
background: url('C:\Users\Jason\Desktop\champions\images\shop.png');
To this
background: url('C:/Users/Jason/Desktop/champions/images/shop.png');
Cheers.
It looks fine of your css. Try to use firefox or chrome debugger to check if the background image can be loaded or not. Try to change the value of the background-size. Sometimes the background image is too large that you can only see part of it (which may be completely white) on the screen.
Your path is wrong
try this: url('images/shop.png') - if your css is in champions

How to add a border-bottom-image with css

I created the following image to be rendered under all h1 title tags in my website. Trouble is, every tutorial I find online discusses border image property as a all around border.
All I want to achieve is to get this one small image underneath the title, once. No repeat. centered. According to this http://www.css3.info/preview/border-image/ there is a property called border-bottom-image. But I can't seem to get it to display properly.
Google chrome developer tools tells me that this is an unknown property name. If I can't achieve this with the following css3, how can I achieve it?
.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}
Here are two options that allow you to do what you want without resorting to border-image, which is not really built for what you want to do.
background-image + :after
This uses a pseudo-element (:after) to "insert" a block with your given image as the background-image. I think this is probably better than the next option, since it's least disruptive to the element's styling.
.entry-title:after {
content: "";
display: block;
height: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/2/
background-image + padding
This uses padding-bottom to make space for the image, then sticks the image along the bottom of the element, positioning in the center.
.entry-title {
padding-bottom: 70px;
background-image: url(http://placehold.it/350x65);
background-repeat: no-repeat;
background-position: center bottom;
}
http://jsfiddle.net/mh66rvbo/1/
work for me ....
.entry-title{
border-bottom: 20px solid #000;
border-image:url('bottom.jpeg');
border-image-repeat: round;
border-image-slice: 300;
text-align: center;
margin: 0px auto;
width:70%;
}
From the link you provided (http://www.css3.info/preview/border-image/)
border-image currently works in Safari and Firefox 3.1 (Alpha).
Per my understanding, "border-bottom-image" still doesn't work in the latest version of Google Chrome (natively). But "border-image" does. And you can define width for each individual portion using the (top right bottom left) protocol:
.entry-title{
border-image: url(images/title-borderbottom.jpg);
border-image-width: 0 0 10px 0;
border-image-repeat: stretch;
}
Details: http://www.w3schools.com/cssref/css3_pr_border-image.asp

SVGs as background images don't display properly in IE9

I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.

Background image doesn't show when defined in stylesheet with sublime text

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);
}

Internet Explorer doesn't recognise the 'html' css background image tag?

I was basically wondering if there was a work around to this? I was redesigning my old mans plumbing website, and took a few of the ideas from this website http://visitmix.com/ where they used the body css tag as the header background with a few overlapping designs into the main website body - and the html css tag for the background repeating image of the rest of the webpage. While this works in firefox and chrome, the internet explorer background is just the background color.
The website I'm working on is here: http://www.plumberkendal.co.uk which shows what I mean. I've tried numerous things with the width and the height of the html css tag but to no avail.. heres the css in question:
html
{
background-image: url("../images/html_bg.png");
background-repeat: repeat;
background-color: #5a84c5;
height: auto;
width: auto;
}
body
{
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
background-image: url("../images/header_bg.png");
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}
Any help would be greatly appreciated, cross-browser compatibility with css is an area that really confuses me!
You should assign the background to the body selector, not the HTML tag:
body
{
background-image: url("../images/html_bg.png");
padding-top: 0px;
margin-top: 0px;
...
}
Assigning it to the HTML selector will not work as the HTML contains the head element as well as the body, and is not generally treated as an object that has a background.
Assigning it to the body selector will ignore the <html> and <head> tags and put it right onto the main body of your page, displaying the background as intended.
(If anyone else can explain this better, go ahead!) :)
I know this question has been answered and is older, but I wanted to share my solution in case someone else comes across this. I was having the same problems when I used a background image on my <htm> tag. The solution was to have the correct DOCTYPE. Below is the one I used:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
I also added #charset "utf-8"; to the top of my style sheet.
The way I formatted my background attribute is also different than how you have yours, but I do not know if that makes a difference.
html {
background: url("../images/html_bg.jpg") #000 repeat-x;
}
I was able to have both a <body> and <html> background image that worked in Firefox and IE.