如何设置背景图片

Question

I need to set this background image in my website for chrome and all other browser but in chrome it work perfect but in firefox and other browser doesn't work perfectly. Even for firefox I tried the -moz- tag but doesn't work.

{
    position: relative;
    background:url(backgrdnd2.jpg);
    background-repeat:no-repeat;
    -moz-background-size:100% 100%;
    background-size:100% 100%;
}

Answer 1

try backgroud-size:cover;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover; 

for the rest of the browsers

hope it helps.

Answer 2

The background property is supported in all major browsers. See: http://www.w3schools.com/cssref/css3_pr_background.asp

I'm not sure what element you are applying these styles on, but perhaps that element has no height or width? Try inspecting the element in Chrome or using Firebug in Firefox to determine if your background image is loading, and whether or not the element you are applying the background to is visible.

Answer 3

First, in your css you should put the selector, where do you want to apply the style, for example the body

body {
    position: relative;
    background:url(http://2.bp.blogspot.com/-m7blv8kfKxs/UiAWmV9uJXI/AAAAAAAAJos/RsYP_YC9FbY/s1600/Background-Textures2.jpg);
    background-repeat:no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size:cover;
    background-size: cover;
}

check this link for more information about selectors.

http://www.w3schools.com/cssref/css_selectors.asp

I also used @EduadoRobles suggestion, check this

http://jsfiddle.net/agusgambina/A8nmp/