Duyarlı css arka plan resimleri

Bir web sitesi (g-floors.eu) var ve (css içeriği için bir bg-görüntü tanımladım) arka plan da duyarlı yapmak istiyorum. Ne yazık ki, aklıma gelen tek bir şey dışında bunun nasıl yapılacağı hakkında hiçbir fikrim yok ama oldukça geçici bir çözüm. Birden fazla görüntü oluşturma ve sonra görüntüleri değiştirmek için css ekran boyutunu kullanma, ancak bunu başarmak için daha pratik bir yol olup olmadığını bilmek istiyorum.

Temel olarak elde etmek istediğim şey, görüntünün (filigranlı 'G') görüntünün daha azını görüntülemeden otomatik olarak yeniden boyutlandırılmasıdır. Tabii ki mümkünse

bağlantı: g-floors.eu

Şimdiye kadar sahip olduğum kod (içerik bölümü)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

Aynı görüntünün tarayıcı penceresinin boyutuna göre ölçeklendirilmesini istiyorsanız:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

Genişlik, yükseklik veya kenar boşluklarını ayarlamayın.

DÜZENLEME: Genişlik, yükseklik veya kenar boşluğu ayarlamama ile ilgili önceki satır, OP'nin pencere boyutuyla ölçeklendirme hakkındaki orijinal sorusunu ifade eder. Diğer kullanım durumlarında, gerekirse genişlik / yükseklik / kenar boşlukları ayarlamak isteyebilirsiniz.

Bu kod ile arka plan resminiz merkeze gidin ve div boyutunuz ne olursa olsun boyutu düzeltin, küçük, büyük, normal boyutlar için iyi, herkes için en iyisi, arka plan boyutumun veya div boyutumun değişebileceği projelerim için kullanıyorum

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Bunu dene :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

CSS:

background-size: 100%;

Hile yapmalı! :)

İşte kullandığım duyarlı arka plan görüntüsü için sass mixin. Herhangi bir blockeleman için çalışır . Tabii ki aynı düz CSS'de çalışabilir, sadece paddingmanuel olarak hesaplamanız gerekir.

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

Örnek http://jsfiddle.net/XbEdW/1/

Bu kolay bir =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

JsFiddle demosuna bir göz atın

İşte sahip olduğum en iyi yol.

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

Kontrol edin W3schools'u

Daha Fazla Seçenek

background-size: auto|length|cover|contain|initial|inherit;

kullandım

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

gerçekten iyi çalıştı.

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

Alt resim yüksekliğine / genişliğine x 100 = dolgu altına% dolgu ekleyerek duyarlı web sitesi:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

Daha karmaşık yöntem:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

Ben en iyi olduğunu düşünüyorum sihirli güzel script görmek için arka plan eq Firefox Ctrl + M yeniden boyutlandırmaya çalışın:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Bunu kullanabilirsiniz. Test ettim ve% 100 doğru çalışıyor:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

Bu Ekran Boyutu Simülatöründe web sitenizi hızlı bir şekilde test edebilirsiniz: http://www.infobyip.com/testwebsiteresolution.php

Her değişiklik yaptığınızda önbelleğinizi temizleyin ve test etmek için Firefox'u kullanmayı tercih ederim.

Bir Resim formunu başka bir site / URL kullanmak ve beğenmemek istiyorsanız: background-image:url('../images/bg.png'); // Bu yapı, barındırılan sunucunuzdaki resmi kullanmaktır. Sonra şöyle kullanın: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Zevk almak :)

En boy oranından bağımsız olarak görüntünün tamamının gösterilmesini istiyorsanız, şunu deneyin:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

Bu, ekran boyutu ne olursa olsun görüntünün tamamını gösterir.

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

Sadece iki satır kod, işe yarıyor.

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

JQuery ile kare oranı için uyarlanabilir

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

veya

background-size:100%;

Bence, bunu yapmanın en iyi yolu şudur:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

Bu şekilde daha fazla bir şey yapmanıza gerek kalmaz ve oldukça basittir.

En azından benim için çalışıyor.

Umut ediyorum bu yardım eder.

Birini genişlik için diğerini yükseklik için iki ARGUMENTSbackground-size kullanmayı deneyin.

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

position özelliği üst alt ve merkezi ihtiyacınıza göre hizalamak için kullanılabilir ve arka plan boyutu orta kırpma (kapak) veya tam görüntü (içerme veya% 100) için kullanılabilir