CODEWITHSUNDEEP
javascriptjquerycss
roYal
roYal

Reputation: 197

Image that scales so you always can see the whole image

This is my site where I am testing my project: http://www.rojje.com/. If you want to see what I am trying to achieve then use the username: "test" with password: "password" or create a new user. The first page after login is a page with a image that I want scalable.

Edit: I found the solution but it only works when I use top:0 and if I remove top:0 it will remove a part in the bottom of the image.

If you remove top:0 you will se whats behind the pic: http://jsfiddle.net/g9hh6qvb/

Upvotes: 1

Views: 79

Answers (3)

David Calvin
David Calvin

Reputation: 194

You can use the CSS background-size attribute 'Cover' as mentioned, if your image is set as the background of a div. If you are using an <img/> tag in your HTML, you can also (see both examples below):

CSS:

html,body{
  margin:0;
  height:100%;
}

.section{
  width:100%;
  height:100%;
  display:block;
  float:left;
  position:relative;
  overflow:hidden;
  background:purple;
}

.section:first-child img{
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;  
}

div:nth-child(3){
      background: url("http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg")no-repeat fixed center;
      background-size:cover;
}

HTML:

<div class="section">
   <img src="http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg">
</div>
<div class="section">
</div>
<div class="section">
</div>

Example: CodePen

Upvotes: 0

David Palmiter
David Palmiter

Reputation: 73

Try using background-attachment:scroll, also set the background size with background-size: cover when setting up your style. According to the documentation description it attaches the background to the element itself, so re-sizing the element should re-size the background image also.

Upvotes: 1

Ideogram
Ideogram

Reputation: 1365

You can define a background-image in css and set the background-size to 'cover' or 'contain', see for example:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Mind you that the example you give is made using Flash.

Upvotes: 1

Related Questions