Grow your CSS skills. Land your dream job.

responsive body background photo

  • # March 22, 2013 at 3:37 pm

    hey,
    I am trying to build a responsive site for a director that plays on desktop/laptop pads and computers.
    you can find my in progress work at http://www.thomasdrotardesign.com/jb/

    my problem is trying to control how the body background image shows itself on the desktop and laptop computer. i have a 30 inch screen as well as a 15 inch laptop. the background image looks fine on the 30″ but on the 15 inch desktop i am only seeing a quarter of the image.

    what i would like is to have the image appear centered and in the same ratio for both a 30″ and 15 inch screen. is this possible to do? also, what would be the perfect size for the photo itself. I am ow using 2800px x 1365 I would really appreciate any help any of you talented people can give me. I thank you in advance

    # March 22, 2013 at 3:52 pm

    found it. css in the body tag is this:

    background-size: cover;

    THANK YOU AGAIN FOR TRYING TO HELP ME OUT.

    DROTAR

    # March 22, 2013 at 3:58 pm

    > also, what would be the perfect size for the photo itself. I am ow using 2800px x 1365 I would really appreciate any help any of you talented people can give me. I thank you in advance

    Ideally, you should use optimized images, and images sized appropriately dependent on the screen resolution. There’s no point using a 2800×1365 image if the viewport will only be 940×600. I do media queries to change background images depending on viewport size.

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

You must be logged in to reply to this topic.

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