CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
michltm
michltm

Reputation: 1469

Zoom or crop a background image instead of stretching it

I have a background image which takes the full width of the browser window. This background image should have a fixed height, lets say 500 px.

I'm trying to get this image to be as complete as possible when its aspect ratio is close to the one of the browser window, and then to zoom or crop on a part of the image (middle for example) rather than stretching it or displaying just a side of it when the browser window gets larger.

Here is an example of what I am trying to get:

enter image description here

Here is a Fiddle with how it is working currently: https://jsfiddle.net/bb61c412/

And here is the current HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-top ">
    <div class="container">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">website</a>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
          <span class="icon-bar"></span>
        </button>
      </div>
    </div>
  </div>


  <div style="width:100vw; height: 500px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Paul_Gauguin_088.jpg); background-repeat: no-repeat;">
  </div>

Upvotes: 1

Views: 2276

Answers (3)

Ahmed
Ahmed

Reputation: 1776

Your code should be like this :

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-top ">
    <div class="container">
      <div class="navbar-header">
        <a href="#" class="navbar-brand">website</a>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
          <span class="icon-bar"></span>
        </button>
      </div>
    </div>
  </div>


  <div style="width:100vw; height: 677px; background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/Paul_Gauguin_088.jpg); background-repeat: no-repeat;background-size:cover">
  </div>

Upvotes: 1

Damien
Damien

Reputation: 3362

As @theblackgigant said you have to set background-size property to 'enter code herecover. You can also set background-position: bottom center to have the right behavior https://jsfiddle.net/bb61c412/2/

Upvotes: 1

Reyno
Reyno

Reputation: 6505

Add background-size:cover thats it

https://jsfiddle.net/bb61c412/1/

Upvotes: 1

Related Questions