CODEWITHSUNDEEP
csshtml
user3617880
user3617880

Reputation: 3

image header fit to screen

I know there are a lot of topics about image header; but I checked most of them, and they couldn't help me.

This is my problem: I have an image that I want to use as header. I finally found the way to place it, but then it shows with its original size. I tried max-width:100%, but the size didn't change and just stays there.

HTML:

<body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>

And for my CSS, I have this:

header#niberus
{
width: 100%;
}

I tried to remove the width and the height from my HTML file, but then the image stays at normal size. When I add the width and height like now, it fills the screen; but of course, when you make the window smaller, the picture doesn't change.

Here is my full HTML code:

<!DOCTYPE HTML> 
<html> 
 <head> 
 <link rel="stylesheet" type="text/css" href="default.css">
 <title>Niberus-gaming</title> 
 </head>
 <body>
<header id="niberus">
<img src="nib1.jpg" alt="nib1" width="1900px" height="450px"></img>
</header>
<div class="hbuttons">

<ul>
<li><a href="niberus.html">-Home-</a></li>
<li><a href="news.html">-News-</a></li>
<li><a href="forum.html">-Forum-</a></li>
<li><a href="upcoming.html">-Upcoming projects-</a></li>
<li><a href="about.html">-About me-</a></li>
<li><a href="contact.html">-Contact-</a></li>
</ul>
</div>
<hr>
<table border="1" cellpadding="5px" cellspacing="10px">
<tr>
<td width="300px"><h1>Under construction</h1></td>
<td width="1300px" ><h1>Under construction</h1></td>
<td width="300px"><h1>Under construction</h1></td>
</tr>
</table>

 </body> 
</html>

And here is my full css code:

ul.horizontal li{
display:block;
float:left;
padding:0 10px;
width: 150px;
}
header#niberus
{
width: 100%;
}
body
{
background-color:black;
}
h1 
{
color: white;
}
table
{
color: white;
text-align: left
}



.hbuttons{
float: left;
width: 100%;
background-color: #00FF00;
overflow:hidden;
position:relative;
}
.hbuttons ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
.hbuttons ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
.hbuttons ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:10px 10px;
   font: 30px Impact;
   color: white;
   text-decoration:none;
   line-height:15px
}

Upvotes: 0

Views: 189

Answers (1)

Huangism
Huangism

Reputation: 16438

Currently you are targeting the header tag, you need to target the image itself. Remove the width and height attribute from the html. You can also set a max-width for the img tag if you need to

Target the image

header#niberus {
    display: block;
}
header#niberus img {
    width: 100%;
    max-width: xxxx;
}

Upvotes: 1

Related Questions