Hai,
I am using background-image:url(../image/flower.jpg); in my web page. It always display the background images in IE & Firefox browers in my local server. But sometimes not displaying the background-images from my production server. when i refresh the page sometimes display the empty. CSS class given below
.footer
{
background-image:url(../images/flower.jpg);
background-repeat:repeat;
background-position: center;
width:100%;
height:200px;
}
Thanks
background-position:center; is irrelevant when the image is set to repeat in both directions
which is not going to solve the problem, but makes the code prettier
If you are using a footer 200px as a height is wrong, text size on different monitors etc, better is to set the top bottom left right for absolete positioning, and not set a height at all for an element that just forms part of the normal document flow, an inline footer, the page will display perfectly as the page scrolls down without height settings
a fixed footer works better something like
.footer { background:url(../images/flower.jpg); width:100%; top:auto; bottom:0; position:fixed; }and allows user fonts to not overflow the footer, I assume that font settings elsewhere in the css are all in ems or % not something stupid like px,
so that even blind freddy with a basefont of 180px can view the site
no offense intended to any visually impaired person named Frederick, blind freddy (lower case) is an Australian archetype
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.