Background image dimension

  • yoursm3

    #1370

    What are the dimensions for the picture to fit perfectly in the background? I only know to the header, which is 960 × 198 pixels.

    Mod

    Kenneth John Odle

    #15484

    I’m not quite sure what you mean “fit perfectly in the background”. If you tile the background image, you can use pretty much any size you want (within reason).

    However, if you want an image that will stretch across the entire background (with no repeat), that will depend on the size of your browser window, and hence the size of your monitor. A smaller monitor will only display a part of the image, whereas a larger image will show the entire image with black space around it.

    If you want a single image to stretch to cover the background, regardless of the size of the browser window, you can add this to custom CSS:

    body {
    background-image: url(path_to_file);
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
    }

    I have used this on a non-Wordpress site and it works fairly well (doesn’t work in all browers, though). Let me know how it works for you.

    Ken

    rochagm

    #15485

    Ok, that partially works. It solves my problem wich is to strech the picture to the whole background area, but what i need to know is really the size, the dimension of the picture, because without that, the picture looses definition.

    So, please can you tell me what are the dimensions (ex: 1024 x 480) the image must be so it fits without the necessity to repeat?

    Ty for the css above.

    Admin

    Syahir Hakim

    #15486

    We can’t tell you the dimension of the background area, simply because there isn’t one, but countless of them.

    As Ken mentioned, the width of background area depends on the width of the browser’s window, which in turn depends on the monitor’s resolution. The height on the other hand depends on the browser’s window and the amount of content you have.

    Not everybody has got the same monitor size and resolution, thus there is no single dimension for the background area.

    rochagm

    #15487

    Ok, ty. I think the line above form Ken helps me if I have a big picture with high resolution.

    Mod

    Kenneth John Odle

    #15488

    Bigger picture size is better, but it means a larger file size. If you have readers who have slow connections, that might be an issue.

    ejchampion1987

    #15489

    Ok i used the css code from above and i noticed that it worked in most popular browsers besides IE is there a special tag for IE

    Admin

    Syahir Hakim

    #15491

    Probably not. Those are CSS3 style declarations. IE doesn’t even properly support CSS2.1, at least not until IE8/9.

    ejchampion1987

    #15492

    do you know of a code that i can use that will make it work in all browsers

    Mod

    Kenneth John Odle

    #15493

    Thanks to IE, there is no code that works in all browsers, just most browsers. I am constantly recommending to my readers that use IE that they upgrade to a real web browser, such as Firefox, because they are missing out on some cool features. Check out Firefox at Mozilla.org. Plus, Firefox has lots of cool addons like Firebug.

    If you Google “IE hacks” you get about 18,000,000 hits. IE is a pain to web designers.

    Ken

Viewing 10 posts - 1 through 10 (of 10 total)

  • You must be logged in to reply to this topic.