Results 1 to 2 of 2

Thread: create background cover image

  1. #1
    Join Date
    Feb 2016
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default create background cover image

    hello, how to background cover image like this website? parsaya.com
    i want to use this css for my website.
    thanks
    Last edited by Beverleyh; 02-29-2016 at 04:34 PM. Reason: hyperlink removed

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    html code
    Code:
    <img src="img.png" class="responsive-image">
    put the name your image whatever it is in that bolded part

    css code
    Code:
    .responsive-image{
        width: 100%;
        background-size: 100% 100%;
    } 
    
    and finally, we serve for every view-port the right image:
    
    /* Retina display */
    @media screen and (min-width: 1024px){
        .responsive-image{
            background-image: url('../img/retina.jpg');
        }
    }
    
    /* Desktop */
    @media screen and (min-width: 980px) and (max-width: 1024px){
        .responsive-image{
            background-image: url('../img/desktop.jpg');
        }
    }
    
    /* Tablet */
    @media screen and (min-width: 760px) and (max-width: 980px){
        .responsive-image{
            background-image: url('../img/tablet.jpg');
        }
    }
    
    /* Mobile HD */
    @media screen and (min-width: 350px) and (max-width: 760px){
        .responsive-image{
            background-image: url('../img/mobile-hd.jpg');
        }
    }
    
    /* Mobile LD */
    @media screen and (max-width: 350px){
        .responsive-image{
            background-image: url('../img/mobile-ld.jpg');
        }
    }

Similar Threads

  1. Background Image Carousel won't load stuck on black background
    By accessotronik in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-15-2012, 02:23 PM
  2. Background Image Carousel background-size: cover; is not working
    By kerriluo in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-12-2012, 10:38 PM
  3. Replies: 0
    Last Post: 01-10-2012, 05:27 PM
  4. Image Cover Problem using "Content Gilder"
    By telephonefield in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-12-2010, 04:19 PM
  5. Replies: 6
    Last Post: 02-23-2008, 09:34 PM

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
  •