Grow your CSS skills. Land your dream job.

css perfect full screen image background

  • # August 31, 2011 at 10:18 am

    I’m wondering which is the best solution for an background image to fit every screen, every browser. Also I’ve noticed that the majority of techniques crop the image a little bit.
    I know there are a lot of techniques to do this but I want to know which is the best in your opinion.
    Thanks!

    # August 31, 2011 at 10:24 am

    Personally i prefer to use an absolutely positioned element and use jQuery to dynamically adjust the width and height when the resize event is called, to start off with i personally like the image to be around 1024px x 768px so that when its stretched it doesn’t loose too much detail.

    Of course it comes down to personal preference but you have to weigh the file size against quality and these days speed is the #1 factor for a website.

    # August 31, 2011 at 10:29 am

    Hi, if you aren’t using css3, then check out Chris’ post on a few different methods. If you are using css3, then just set the background image size to “cover” – as explained in this article (there is also a discussion about media queries).

    # August 31, 2011 at 11:09 am

    I was trying to use css3 for this but the image is cropped, it’s not 100% visible.

    # August 31, 2011 at 11:22 am

    There isn’t a perfect method. You will either have a cropped image, or an image that has a constant change in height and width dimension relation. I did this today, I used the latter technique (I probably prefer the former though).
    HTML

    Background

    CSS

    #background{position: asbolute; z-index: -1;}

    JQuery

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    $('#background').width(windowWidth).height(windowHeight);
    $(window).resize(function(){
    $('#background').width($(window).width()).height($(window).height());
    });

    I don’t like full-screen background-images at all.

    # January 17, 2012 at 6:18 pm

    I’m using the ‘CSS3 only’ version #1 on a photo project that relies on images being showcased at clean resolution, and without any cropping. I love the way the fullscreen image works on the page and the overall visceral experience on a wide-range of display sizes, but I am am losing some of the top and bottom of my images vertically.

    Any insight on how I could keep that fullscreen glory without losing any of the context / content within the images?

    Thanks all!

    # January 18, 2012 at 6:36 am

    You should have a look at background-image this article. It may help you.

    # January 19, 2012 at 1:01 am

    try this one. add it to your css file

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

    }
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".