Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
Like Tree1Likes
  • 1 Post By Ronald Roe

Thread: Showing my COMPLETE image (padding causes scrollbar) + bracket explaination (thanks)

  1. #1
    Junior Member
    Join Date
    Jul 2017
    Posts
    2
    Member #
    57095

    Showing my COMPLETE image (padding causes scrollbar) + bracket explaination (thanks)

    So I have this code for my web title page, with a goal of making the entire picture show as the background without a scrollbar (I also need help with getting the page to move to another one upon clicking =/ ):

    HTML Code:
    <style>
    
    
    .enterPage{
        cursor:hand;
    }
    
    
    * {
        margin: 0px;
        padding: 0px;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-font-smoothing: subpixel-antialiased;
    }
    
    html {
      
      background: url(all.jpg) ;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      window.onclick = OpenWin();
    
    }
    
    
    </style>
    
    <script>
       function OpenWin(){
      window.open("/home1.html");
    }
    
    </script>



    Question1:
    I got the scrollbar to go bye bye, but I can't get the complete image to show on screen. How can I accomplish this.

    SuperNoobQuestion2:
    what is the difference between using <html> and html{ //code }? This is a big reason why I'm confused on how to combine the above code with the following code...:

    HTML Code:
    BODY.enterPage{
        cursor:hand;
    }
    
    
    
    <body bgcolor="#000000" class="enterPage"  onclick="goto();">
        <a href="/home1.html"></a>
    
    
    </body>
    Last edited by Ronald Roe; Jul 26th, 2017 at 01:20 PM.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Code:
    background-size: contain;
    The only problem there is that if the screen is a different aspect ratio, it won't completely fill it.

    The problem here is that the aspect ratio is of the image is different to that of your browser viewport. Don't bother trying to compensate for that, though. What works on yours won't work on 50%+ of the rest of screens, and that's assuming the user has the window maximized...and they're not viewing on mobile...also, portrait orientation.

    There's 2 ways to go about this:

    1) Deal with some of the image being cut off. Set the background-position values to make sure the important part of the image is showing. (recommended)
    2) Use JavaScript to manipulate the image size so the entire image is shown. Remain aware that this may require stretching or cropping it on the fly. (advanced, not recommended)
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Jul 2017
    Posts
    2
    Member #
    57095
    Thanks I'm gonna try the first method. Can anyone explain my confusion with the brackets(question 2). Not sure how to convert one into the other.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    <html> is an HTML tag.
    html{//code} is CSS that selects and applies styles to the tag.
    charley_43613 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

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

Tags for this Thread

All times are GMT -6. The time now is 12:50 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com