SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Responsive CSS background-images

    Hi there,

    I have a quick question regarding how CSS works.

    I am using @media to add CSS rules to a responsive website. One page requires quite large background images for desktop (around 1000px x 600px). For smaller devices, I'll need to display smaller images. My question is: does the CSS compile completely before loading images or will it load the first image (the desktop image), and then load the smaller image when it reaches the new rule.

    If the CSS complies completely before loading background images, I can do something like this:
    Code:
    #background-image-div{ background: url(../images/large-image.png/) center no-repeat; }
    
    @media only screen and (max-width: 1192px) #background-image-div{ background: url(../images/smaller-image.png) center no-repeat; }
    Otherwise its probably better to use a sprite, and adjust the background position for the mobile device.

    Thanks in advance for your help.

    Mike

  2. #2
    SitePoint Mentor silver trophybronze trophy

    Join Date
    Feb 2008
    Location
    Preston, Lancashire
    Posts
    1,378
    Mentioned
    72 Post(s)
    Tagged
    1 Thread(s)
    Hi there, have you heard of retina display images. Take a look at this, http://retinajs.com/

    This is all done behind the scenes. I hope this helps your journey.
    follow me on ayyelo, Easy WordPress; specializing in setting up themes!

  3. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Sega,

    Thanks for the very useful link. I'm sure it will come in handy in the future.

    For this particular problem though, I need to go the other way round. I need to provide smaller images for tablet/mobile, regardless of whether they have retina displays. I'm really just interested in the way that browsers compile CSS rules, so I can decide the best approach.

    Best,
    Mike

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,283
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    Browsers apply a "last in, first out" approach, in that the last element that matches the specificity will apply. So in your case, the last rule will apply for the smaller viewports, and will get the smaller image.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I imagine browsers compile all the css first before loading images. Couldn't you test it by creating an insanely large image and see if it affects load time on a device?

  6. #6
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. Problem solved.
    .

  7. #7
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How was it solved? Are the large images DL'd first or will the smaller @media rules be followed?

    Quote Originally Posted by mickyginger View Post
    Thanks guys. Problem solved.
    .


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •