CSS background image size scaling

Question

I need help regarding background image size scaling. code: http://codepen.io/AnilSimon123/pen/JRBRZa

here i have kept

  .bgimage{
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
  background-size:100% auto;
  height:700px;
  width:100%;
  background-position:top center;
  background-repeat:no-repeat; 
}

As you can see the image has dimensions 588 x251 px.

I want the image to stretch along the width but keep its original height,all the while keeping the height of the container as 700px. The height of the image is dynamic.

Thanks and regards, Anil Simon

Vivekraj K R · Accepted Answer · 2016-10-14 07:02:00Z

3

Try using background-size: cover

.bgimage{
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
  min-height: 251px;
  width:100%;
  background-position:top center;
  background-repeat:no-repeat; 
  background-size: 100%;
}

edited Oct 14, 2016 at 7:02

answered Oct 14, 2016 at 6:26

Vivekraj K R

2,5582 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anil Simon Over a year ago

Using background-size:cover makes the height expand. I want the background size as the original height of the image ie, 251px.

Anil Simon Over a year ago

I want width:100% and height: 251px. But since height is dynamic i cant keep a fixed height

Vivekraj K R Over a year ago

@AnilSimon replace height:700px with min-height: 251px; and add background-size: 100%; this will work.

Shahil Mohammed · Accepted Answer · 2016-10-14 07:15:26Z

1

.bgimage{
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat top left;
 background-size:100% 251px;
  width:100%;
  height:700px;
}

<div class="bgimage">
  this is test
</div>

Use the background-size: cover instead background-size:100% auto;

background-size: cover : Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

edited Oct 14, 2016 at 7:15

answered Oct 14, 2016 at 6:32

Shahil Mohammed

3,8785 gold badges28 silver badges44 bronze badges

9 Comments

Anil Simon Over a year ago

Using background-size:cover makes the height expand. I want the background size as the original height of the image ie, 251px.

Anil Simon Over a year ago

I want width:100% and height: 251px. But since height is dynamic i cant keep a fixed height

Anil Simon Over a year ago

But i have a requirement that i should keep height of the container as 700px fixed. The image coming as background from the DB should be stretched along its width all the while keeping its original height. I can get images from 1px to 700px.

Shahil Mohammed Over a year ago

Updated my answer. Now this should fix your issue

Anil Simon Over a year ago

by giving a min-height:250px i am restricting the images i obtain from DB. If i get a 400px image it will only be displayed with a height of 250px.

|

elcanziba · Accepted Answer · 2016-10-14 08:06:34Z

1

Background cover works just fine.

background-size: cover;

But don't forget to add also the background-position to fixed and center. For more details you can check https://css-tricks.com/perfect-full-page-background-image/

Hope it helps

answered Oct 14, 2016 at 8:06

elcanziba

311 bronze badge

Comments

mithu · Accepted Answer · 2016-10-14 06:38:45Z

0

    .bgimage{
   background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
    background-attachment: fixed;
    background-position:top center;
    background-size: cover;
    -webkit-background-size: cover;
    height:700px;
    width:100%;
    color: #fff;
    text-align: left;
    background-size:100% auto;
    background-repeat:no-repeat; 

}

i think this is what you want

answered Oct 14, 2016 at 6:38

mithu

2473 silver badges14 bronze badges

2 Comments

Anil Simon Over a year ago

Using background-size:cover makes the height expand. I want the background size as the original height of the image ie, 251px.

Anil Simon Over a year ago

I want width:100% and height: 251px. But since height is dynamic i cant keep a fixed height

Ruan Kruger · Accepted Answer · 2016-10-14 07:07:32Z

Try adding a container around your div with a height of 700px and add the bgimage on another div that is positioned absolute(so it doesn't affect anything else), height 251px and z-index:-1 to send it to the back. Also to stretch it set the background size to 100% 100%. Hope this helps

.container{
  height:700px;
  width:100%; 
}

.bgimage{
  margin:0;
  position:absolute;
  z-index:-1;
  background:url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg');
  background-size:100% 100%;  height:251px;
  width:100%;  background-position:top center;
  background-repeat:no-repeat;
}

<div class="container">
  <div class="bgimage"></div>
  this is test
</div>

hackthecodes · Accepted Answer · 2016-10-14 07:43:44Z

0

.bgimage { background: url('http://www.thedesignlove.com/wp-content/uploads/2012/08/free-blue-abstract-vector-background-6.jpg') no-repeat center top; width: 100%; height: 700px; background-size: 100% 251px;}

answered Oct 14, 2016 at 7:43

hackthecodes

11 bronze badge

Collectives™ on Stack Overflow

CSS background image size scaling

6 Answers 6

3 Comments

9 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

9 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related