Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css perfect full screen image background

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #34157
    dynamyc
    Member

    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!

    #86025
    SgtLegend
    Member

    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.

    #86026
    Mottie
    Member

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

    #86001
    dynamyc
    Member

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

    #85998
    jamygolden
    Member

    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.

    #94883
    mthrlwd
    Member

    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!

    #94918
    jamygolden
    Member

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

    #94988

    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)
  • The forum ‘CSS’ is closed to new topics and replies.