CODEWITHSUNDEEP
imagehtml
Filip
Filip

Reputation: 165

How to display an image as your whole webpage?

I did give a search before I started to ask this question as it is a very simple question. I have an image and I would like to have it as the only element on our webpage. There is no other content as this image conveys what we want to convey. Now we would also like to resize itself depending upon the device it is being displayed. I hope this is achievable through HTML though I would like to know if there is any other options.

Thank you,

Karsnen

Upvotes: 0

Views: 2511

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201828

You can use an image as a web resource (“page”). You could simply link to it using something like href="test.jpg", or you could announce its URL directly. Browsers will display it somehow, possibly scaling it to fit browser window width.

The next simpler, and better, approach is to use a page with just an img element as its content. It can be made to scale to browser window width by setting its width to 100% (in HTML or in CSS). This way, it will keep its width:height proportion when scaled. The quality of scaling in browsers varies but is generally good, unless you scale upwards a lot. In this approach, the inherent width of the image should be sufficiently large (say 2,000 pixels) to avoid considerable upwards scaling.

To remove default spacing around the image (default page margins), it’s simplest to use CSS.

Example (with “...” to be replaced by useful information):

<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">

Upvotes: 1

Vin Burgh
Vin Burgh

Reputation: 1419

What you're looking for is the background-size property. By applying background-size:cover to your <body>, the image will resize itself accordingly regardless of viewport dimensions. Note: Your image may clip with the use of cover.

An alternative value for background-size can also be contain. If you apply background-size:contain instead, it'll still resize the image accordingly just as the former would. Note: While this approach promises to never clip the image, it'll also show negative/dead space as well (which sometimes isn't ideal).

Your CSS should reflect the following:

body {
 background-image: url('bg.jpg');
 background-position: center center;
 background-size: cover; /* or background-size: contain */
}

Upvotes: 2

quatermain
quatermain

Reputation: 1452

I use this: css

#body{
    background:url(../img/bg.jpg);
    margin: 0;
}

javascript

$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)

Upvotes: -1

Ry-
Ry-

Reputation: 225164

Set it as a background-image and use the appropriate background-size (e.g. contain):

html {
    height: 100%;
}

body {
    background: url('to/your/image.png') no-repeat;
    background-size: contain;
}

Here's a demo.

Upvotes: 0

Related Questions