Full Page Background image

Question

How to make an background image scalable base up on screen resolution using HTML ? My image is 2200x2200

Sharad Rathore · Answer

Hi David, Try like this body { background-image: url(title.gif); background-repeat: no-repeat; } Regards, Sharad kumar rathore

Iftikar Hussain · Answer

it seems to be fine. Please share the screen shot where you think there is an issue. Regards, Iftikar

David Smith · Answer

I attached complete code. The way I got it. Its working. but you can check it out

Iftikar Hussain · Answer

share me your complete code Regards, Iftikar

Iftikar Hussain · Answer

yes. it will take your windows resolution Regards, Iftikar

David Smith · Answer

When I use your javascript, it pushes my wrapper div beneath it, instead of on top of it.

David Smith · Answer

Where in the javascript below you are resizing. I see that you are actually calling the ResizeImage function you created. Is the height and width function below resizing? $(document).ready(function () { ResizeImage(); }); function ResizeImage() { var width = parseInt(screen.width); var height = parseInt(screen.height); $("ImgBg").height(height); $("ImgBg").width(width); }

David Smith · Answer

Yes Sunny Kumar, that did not work. It stretch the image to much, my image size is 2200 x 2200. The solution i posted work. I can see the entire image upon resize with no problem. ftikar Hussain is it better to use javascript instead?

Sunny Sharma · Answer

Did you try my answer?

Iftikar Hussain · Answer

try like this $(document).ready(function () { ResizeImage(); }); function ResizeImage() { var width = parseInt(screen.width); var height = parseInt(screen.height); $("ImgBg").height(height); $("ImgBg").width(width); } Regards, Iftikar

David Smith · Answer

Iftikar Hussain I was doing that I first, that does not make the image scalable upon the resolution adjusting. Review code below to see what I am going. I got it to work. As the page resolution gets bigger or smaller, the layout changes. CSS: #bg { position:fixed; top:0; left:0; width:100%; height:100%; } HTML CODE:

Iftikar Hussain · Answer

Hi, Try like this body { margin: 0; background: url('Image/bg.jpg') no-repeat center center fixed #000; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Regards, Iftikar

Sunny Sharma · Answer

Hi David, Follow the style below: --------------------- body { margin:0; background:url(http://www.all-hd-wallpapers.com/wallpapers/abstract/330021.jpg) no-repeat fixed top center; background-color:#000001; background-size:100%; } ---------------------- Keep the Background-color matching to your image for just in case the image is loading or can't be loaded. It will maintain the feel of your image till it get's fully loaded. Size will not matter to make it in full background but yes, it may be sucking your bandwidth. I would suggest you to reduce the size as far it fits and looks good. Hope it helps. Cheers!

Full Page Background image

Answers (13)