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.

    -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 Coder
    Join Date
    Apr 2012
    Location
    Singapore
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hi,

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

    Regards,
    Chris

  • #3
    Master Coder
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    5,419
    Thanks
    26
    Thanked 748 Times in 746 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.

    Because I love FLEXBOX and tired of waiting: http://davidwalsh.name/goodbye-vendor-prefixes

  • #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%;

    -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
    •