CODEWITHSUNDEEP
htmlcssfullscreen
Dan
Dan

Reputation: 1660

Centered full screen html image (not an image in css)

I'm trying to have a full screen image, easy enough with css using the code below.

width:100%;
height:100%;
background: url('photo2.jpg'); 
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

but the image is already placed in an html div, see here

<div class="fixed-background">
  <img src="photo2.jpg"/>
</div>

It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.

Upvotes: 2

Views: 24776

Answers (6)

Nicola Voso
Nicola Voso

Reputation: 26

try this

<style>
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.fixed-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.myimg {
    height: inherit;
}
</style>

<html>
<body>
    <div class="fixed-background">
        <img src="public/dbs/images/1.jpg" class="myimg" />
    </div>
</body>
</html>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

Use object-fit: cover; on the <img> tag:

<div>
  <img src="photo2.jpg" style="object-fit: cover;"/>
</div>

that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit

Upvotes: 1

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

The points that I gather from your css are the following:

  • Center the image
  • Fix the position of the image (so it doesn't scroll with the page)
  • Cover the viewport, scale proportionally to fit

That said, I suggest the following given your html

.fixed-background{
   position:fixed;
   width:100vh;
   height:100vh;
   overflow:hidden;
}

.fixed-background > img{
   position:absolute;
   width:100%;
   height:auto;
   top: 50%;
   transform: translateY(-50%);
}

Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.

Upvotes: 0

Danny van Holten
Danny van Holten

Reputation: 932

Try the following: http://jsfiddle.net/pj73m4po/4/

Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.fixed-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

img {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}

Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.

Upvotes: 0

Alex
Alex

Reputation: 1205

Full screen Image? you could do something like this through HTML

<div class="fixed-background">
  <img src="photo2.jpg" height="100%" width="100%">
</div>

http://jsfiddle.net/pj73m4po/

EDIT:

or are you looking for something like this?

http://jsfiddle.net/pj73m4po/1/

Upvotes: 0

Dadou
Dadou

Reputation: 1008

Without using a background, consider this:

#mydiv {
    position: absolute;
    top: 50%;
    right: 50%;
    bottom: 50%;
    left: 50%;
    margin-top: -100px; /* (calculate half the height of your image) */
    margin-left: -100px; /* (calculate half the width of your image) */
}

Upvotes: 0

Related Questions