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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Location
    North East England
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Main banner size issues!

    Hi there

    In the process of trying to learn HTML and CSS (one week in!)

    There is something I am trying to achieve and having no luck finding the answer, I'm guessing it's something in my coding as all the examples I've seen online don't affect it.

    I've attached a screenshot and my code, I want the main image to fill the blue box (see attachment) and then the main body to be e.g. 1000px, centred but the image to remain full width.

    Main banner size issues!-screen-shot-2014-08-15-09.10.27.jpg



    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title> Graphic Design, Creative Logo Design, Graphic Design Teesside </title>
    <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

    <div class="container">
    <header>
    <h2>RedBeardOriginals</h2>
    <nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Logos</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
    </ul>
    </nav>
    </header>
    </div>

    <div class="banner">
    </div>

    <footer>
    <p>www.redbeardoriginals.com</p>
    </footer>


    </body>
    </html>





    CSS

    body{
    font-family: sans-serif;
    margin: auto;
    background-color: red;
    }

    a {
    color: #7e7e7e;
    text-decoration: none;
    }

    header {
    overflow: hidden;
    background-color: yellow;
    }

    header h2{
    float: left;
    padding-top: 20px;
    }

    nav {
    float: right;
    padding-top: 30px;
    }

    nav li {
    display: inline;
    padding-left: 35px;
    }

    a:hover {
    color: black;
    }

    .banner {
    background-image: url(../images/sunset.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 800px;
    display: block;
    background-color: blue;
    }

    footer{
    background-color: green;

    }

  • #2
    New to the CF scene
    Join Date
    Apr 2012
    Location
    Singapore
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,

    Please link the site so that everyone can chip in to help.

    Regards,
    Chris

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,579
    Thanks
    23
    Thanked 643 Times in 642 Posts
    background-size: cover; should work, but worst case you might have to resize the original image to fit without distortion.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Aug 2014
    Location
    North East England
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi guys

    Thanks for getting back, i;m only building the site and don't have hosting yet so don't think i can link??

    Ive attached a screenshot and managed to do it using the below css code. Does this seem the best way, will it work on all devices and screen sizes?

    .banner_home {
    background-image: url(../images/climb.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
    background-size: 100%;

    Main banner size issues!-screen-shot-2014-08-15-16.28.14.jpg

    cheers


  •  

    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
    •