Масштабирование размера фонового изображения CSS

Мне нужна помощь в масштабировании размера фона. код: http://codepen.io/AnilSimon123/pen/JRBRZa

здесь я сохранил

  .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; 
}

Как видите, изображение имеет размеры 588 x 251 px.

Я хочу, чтобы изображение растягивалось по ширине, но сохраняло свою первоначальную высоту, сохраняя при этом высоту контейнера как 700 пикселей. Высота изображения динамическая.

Спасибо и приветствую, Анил Саймон

html,css,html5,css3,

0

Ответов: 6

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>

Используйте background-size: coverвместо этого background-size:100% auto;

background-size: cover : масштабируйте фоновое изображение настолько, насколько это возможно, чтобы область фона полностью покрывалась фоновым изображением. Некоторые части фонового изображения могут не отображаться в области фонового позиционирования

3

Попробуйте использовать 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%;
}
1

Фоновая обложка работает просто отлично.

background-size: cover;

Но не забудьте добавить также положение фона в фиксированное и центральное. Для получения дополнительной информации вы можете проверить https://css-tricks.com/perfect-full-page-background-image/

Надеюсь, поможет

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; 

}

я думаю, это то, что вы хотите

0

Попробуйте добавить контейнер вокруг вашего div с высотой 700 пикселей и добавить bgimage в другой div, который позиционируется как абсолютный (так что он не влияет ни на что другое), высота 251px и z-index: -1, чтобы отправить его обратно. Также, чтобы растянуть его, установите размер фона 100% 100%. Надеюсь это поможет

.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>

HTML, CSS, HTML5, CSS3,
Похожие вопросы
Яндекс.Метрика