CODEWITHSUNDEEP
cssbackground-image
Loko
Loko

Reputation: 6679

background image looks bad when stretching

I got some sort of forum page and a a possibility to comment on it, so the page becomes bigger according to the amount of comments placed on the page. Now my background is stretching obviously, but the problem is my image looks very bad. So I know it wont look bad when I use an image with a pattern, but is there a different way to use a normal background and not making it look bad? This is my CSS btw:

background-size:cover;
background-image:url('lol.jpg');
background-repeat:no-repeat;

Upvotes: 1

Views: 1068

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157314

Inorder to prevent that, you should use background-attachment: fixed;, using this, will prevent the image to get scrolled along the page. This will keep the image static at the back.

selector {
   background-image: url(YOUR_URL_HERE);
   background-size: cover;
   background-attachment: fixed;
}

Info, if you are interested to use short hand syntax instead of writing each property.

Upvotes: 2

avalkab
avalkab

Reputation: 436

Choise one of them

CSS3

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

T1

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

T2

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

jQuery

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

http://css-tricks.com/perfect-full-page-background-image/

Upvotes: 0

Oleg
Oleg

Reputation: 7377

Use the CSS3 property background-size:

#selector {
    background-size: 100% auto; /* width and height, can be %, px or whatever */
}

This is available for modern browsers, since 2012.

Upvotes: 1

Related Questions