{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 走好不送 的问题《Fullscreen responsive background image in CSS》','https://www.manongdao.com/q-30394.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I want to make this image as the background image of my webpage. However , the problem is that the image doesn't cover the whole of the page, as you may see in this preview , and it gets repeated at the rightmost end . Is there a way so that the image covers the whole page (be it any way , stretching , re-sizing , or something new).
My Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Angry Birds Star Wars</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body {
background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}
</style>
</head>
<body></body>
</html>
Thanks.
UPDATE:
I have now finally come to believe that there is almost nothing that can get that image to fit exactly to my PC screen. I am now ok , and am moving further , please don't post answers now.
Set this for your background image
Use the
background-sizeattribute and set the background repeat tono-repeat.Like this:
See this jsFiddle
You can always use a absolute position div to 100% width and height with z-index so that it can be a background, then you can insert the image with same css for it. thanks
should do the trick. Notice - you can combine position & repeat into the initial background attribute
And apply
jsBin demo
The
fixed(background-attachment) is optional.The above is just a shorthand for:
You've could in all modern browsers but Safari use:
where the
/is used in background shorthand to separate and distinguishpositionfromsize(cause position accepts both single and multiple (X,Y) values), but Safari has a bug with this/shorthand so use as described above.