Full Page Background image

David Smith

13y2.1kHTML 5

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

13 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sharad Rathore13y ago
Hi David,

Try like this

        body
        {
                background-image: url(title.gif);
             background-repeat: no-repeat;
        }

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

Regards,
Iftikar
David Smith13y ago
I attached complete code. The way I got it. Its working. but you can check it out
Iftikar Hussain13y ago
share me your complete code

Regards,
Iftikar
Iftikar Hussain13y ago
yes. it will take your windows resolution

Regards,
Iftikar
David Smith13y ago
When I use your javascript, it pushes my wrapper div beneath it, instead of on top of it.
David Smith13y ago
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?
David Smith13y ago
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 Sharma13y ago
Did you try my answer?
Iftikar Hussain13y ago
try like this

Regards,
Iftikar
David Smith13y ago
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 Hussain13y ago
Hi,
Try like this

Regards,
Iftikar
Sunny Sharma13y ago
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!