0

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; 
}
grg
  • 5,023
  • 3
  • 34
  • 50
Jimmy Min
  • 1
  • 6

3 Answers3

1

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

Fiddle screenshot

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

grg
  • 5,023
  • 3
  • 34
  • 50
Preben
  • 1,277
  • 2
  • 11
  • 20
0

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

Community
  • 1
  • 1
Misunderstood
  • 5,534
  • 1
  • 18
  • 25
0
<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