Gambar latar belakang css responsif

Saya memiliki situs web (g-floors.eu) dan saya ingin membuat latar belakang (dalam css saya telah mendefinisikan gambar-bg untuk konten) juga responsif. Sayangnya saya benar-benar tidak punya ide tentang bagaimana melakukan ini kecuali untuk satu hal yang dapat saya pikirkan tetapi ini cukup solusinya. Membuat banyak gambar dan kemudian menggunakan ukuran layar css untuk mengubah gambar tetapi saya ingin tahu apakah ada cara yang lebih praktis untuk mencapai ini.

Pada dasarnya apa yang ingin saya capai adalah bahwa gambar (dengan tanda air 'G') secara otomatis mengubah ukuran tanpa menampilkan lebih sedikit gambar. Jika memungkinkan tentu saja

tautan: g-floors.eu

Kode yang saya miliki sejauh ini (bagian konten)

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

Jika Anda ingin skala gambar yang sama berdasarkan ukuran jendela browser:

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

Jangan mengatur lebar, tinggi, atau margin.

EDIT: The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

dengan kode ini gambar latar belakang Anda pergi ke tengah dan memperbaikinya ukuran apa pun ukuran div Anda berubah, baik untuk ukuran kecil, besar, normal, terbaik untuk semua, saya menggunakannya untuk proyek-proyek saya di mana ukuran latar belakang atau ukuran div saya dapat berubah

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

Coba ini :

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

CSS:

background-size: 100%;

Itu harus melakukan trik! :)

Here is sass mixin for responsive background image that I use. It works for any block element. Of course the same can work in plain CSS you will just have to calculate padding manually.

@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);
}

Example http://jsfiddle.net/XbEdW/1/

This is an easy one =)

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

Take a look at the jsFiddle demo

Here is the best way i got.

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

Check on the w3schools

More Available options

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

I used

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

which worked really well.

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

Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:

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

More complicated method:

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

Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:

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

You can use this. I have tested and its working 100% correct:

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

You can test your website with responsiveness at this Screen Size Simulator: http://www.infobyip.com/testwebsiteresolution.php

Clear Your cache each time you make changes and i would prefer to use Firefox to test it.

If you want to use an Image form other site/URL and not like: background-image:url('../images/bg.png'); //This structure is to use the image from your own hosted server. Then use like this: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

Enjoy :)

If you want the entire image to show irrespective of the aspect ratio, then try this:

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

This will show the entire image no matter what the screen size.

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

Just two lines of code, it works.

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

Adaptive for square ratio with jQuery

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;

or

background-size:100%;

I think, the best way to do it is this:

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

In this way there's no need to do nothing more and it's quite simple.

At least, it works for me.

I hope it helps.

Try using background-size but using TWO ARGUMENTS One for the width and the other one for the height

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;

the position property can be used to align top bottom and center as per your need and background-size can be used for center crop(cover) or full image(contain or 100%)