My background image is not fully extended when i adjust my browser

I use a background image for my header and when I adjust my browser it won't fully extend. I wanted my background to look like extalia.net. Here is a picture of it:

Here is my HTML code for my nav and header

<nav>
    <div id="nav-container">
        <ul>
            <li class="select"><a href="">Home</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Song</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Login</a></li>
            <li><a href="">Register</a></li>
        </ul>
    </div>
</nav>
<header>
    <div id="header-container">
        <div class="header-container-left">
            <img src="pic/logo2.gif">
        </div>
        <div class="header-container-right">
            <h1>This is my first photoshop web design :)</h1>
            <button class="header-button">More info <3</button>
        </div>
    </div>
</header>

And this is my css

nav{
    width: 100%;
    height: 50px;
    background-color: #54598f;
}

#nav-container{
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    background-color: #54598f;
}

#nav-container li, a{
    display: inline-block;
    text-decoration: none;
    color: white;
    font-family: 'agentorange';
    font-size: 17pt;
    margin-right: 10px;
    line-height: 50px;
    text-align: center;
}

.select a{
    color: white;
    background-color: #363a60;
    padding-left: 15px;
    padding-right: 15px;
}

/*header*/

header{
    width: 100%;
    height: 250px;
    background: url('../pic/header.jpg') center;
}

#header-container{
    width: 1200px;
    height: 250px;
    margin: 0px auto;
}
.header-container-left{
    width: 270px;
    height: 250px;
    float: left;
    margin-top: 30px;
}

.header-container-right{
    width: 930px;
    height: 250px;
    margin-left: 280px;
    padding-top: 33px;
}
.header-container-right h1{
    font-family: 'agentorange';
    font-size: 18pt;
    color: white;
}
.header-button{
    border-radius: 10px;
    background-color: rgb( 54, 58, 95 );
    box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
    width: 220px;
    height: 50px;
    border: none;
    font-size: 16pt;
    color: white;
    font-family: 'agentorange';
    margin-top: 20px; 
}

Answers


I would recommend using an SVG image. While you can have the Browser scale jpeg, png, gif and etc. SVG is made to scale.

Traditional image scaling by the Browser can introduce image distortion and slows page load time.

CSS scaling is "covered" here: Automatically resize images with browser size using CSS


My fiddle: http://jsfiddle.net/8s74zfvw/

<nav>
    <div id="nav-container">
        <ul>
            <li class="select"><a href="">Home</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Song</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Login</a></li>
            <li><a href="">Register</a></li>
        </ul>
    </div>
</nav>
<header>
    <div id="header-container">
        <div class="header-container-left">
            <img src="http://lorempixel.com/250/200/sports/">
        </div>
        <div class="header-container-right">
            <h1>This is my first photoshop web design :)</h1>
            <button class="header-button">More info <3</button>
        </div>
    </div>
</header>

The CSS:

header{
    width: 100%;
    height: 250px;
    background: url('http://lorempixel.com/400/300/nature/') center;
    background-size:cover;
}

See details in the fiddle.


<div id="header-container">
   <div class="header-container-left">
      <img src="test.jpg">
   </div>

You're <div class="header-container-left"> has a width of: 270px; And that is the problem. So even if you give a 100% width to your image it will just inherit the width of it's parent, in this case <div class="header-container-left">.

So either make the parent: <div class="header-container-left"> width: 100% Or just put the image one level up, so make it a direct child of the .header-container That will look like this:

Check out this fiddle: http://jsfiddle.net/yux2jr1n/6/ for option 1 Check out this fiddle : http://jsfiddle.net/yux2jr1n/6/ for option 2

If you need more help, please let me know. Cheers


Need Your Help

NetBeans - Programatically Remove NotificationDisplayer Notifications

netbeans

The NetBeans API provides the org.openide.awt.NotificationDisplayer class to create and show clickable notifications in the main status line. For example,

“size” vs “readelf -t” command gives different segment length

linux-kernel size objdump readelf

size my_obj.o, lists the size of text, .data segments in bytes.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.