Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Posts
    165
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Make Background Image take Full Screen

    I am working on this site, but I can't figure out how to make the background images take the full display of the browser.

    Test Site

    any help would be much appreciated.

    many thanks,
    Andrew

  2. #2
    New Coder
    Join Date
    Jan 2013
    Posts
    96
    Thanks
    2
    Thanked 6 Times in 6 Posts
    i would do something like this
    HTML:
    Code:
    <header>
        <p>Content in here</p>
    </header>
    CSS:
    Code:
    header { 
      display: table;
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      background: url("****YOUR IMG SOURCE*****") no-repeat center center scroll;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      background-size: cover;
      -o-background-size: cover;  
    }

  3. #3
    Regular Coder
    Join Date
    Aug 2002
    Posts
    165
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks, but I cannot change the HTML, I need a CSS solution for the existing HTML on the site. I need to force the rotating images to cover the whole screen somehow.

  4. #4
    Super Moderator vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,437
    Thanks
    3
    Thanked 50 Times in 50 Posts
    I notice that you use Bootstrap on your site. That's not something I personally use, but have you seen this Sitepoint article? It might be what you're looking for.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  5. #5
    Regular Coder
    Join Date
    Aug 2002
    Posts
    165
    Thanks
    6
    Thanked 0 Times in 0 Posts
    yes thanks for that, i figured it out !


 

Tags for this Thread

Posting Permissions

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