CODEWITHSUNDEEP
javascripthtml
Edward B.
Edward B.

Reputation: 417

HTML: Making an image fill the screen, preserving the aspect ratio at different resolutions

I am having an issue making an HTML page. Specifically, I want to have a background image of a specific size (larger than the screen); however, I want the aspect ratio to be kept and the image to fill as much of the screen as possible (without tiling).

I would also like to be able to position the other elements relative to the background image; the background is part of the content and I want other elements (for example text) to keep its spot in the image at whatever resolution the browser window is.

Can anybody give me a solution? I can (obviously) use HTML, CSS and JavaScript. If no solution can be found, I'll make the image 800X600 or 1024x768 and stick to that resolution. I hope I don't have to resort to this though.

EDIT: I should mention that backgound-size: contain; does not work as exepcted. At least not for me.

Upvotes: 0

Views: 127

Answers (1)

codeVerine
codeVerine

Reputation: 762

Use css background-size value 'contain'

body
{
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:contain;
}

Upvotes: 1

Related Questions