CODEWITHSUNDEEP
htmlcss
anouxy
anouxy

Reputation: 13

Picture on full width screen

I would like to cover the image on of my page the full width of the screen. (so not the whole screen but only the width) and if possible I would also like if the image shrinks if the screen gets smaller. I never did this before so i don't really know how I can make this? Can anybody help me?

this is how my page currently looks like 

@charset "UTF-8";

body {
    background-color: #ADF1F5;
}

html, body{
    margin: 0;
    padding: 0;
}

#Anouk {
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

#Anouk img{
    display: block;
}

#header {
    height: 80px;
    background: #000000;
}

li {
	display: block;
    float: left;
}

li a {
    color: #FFFFFF;
	height: 80px;
}

#contact {
	float: right;
}
<div id="Anouk">
  <img src="logo/Hout.png" width="1000px" alt="Logo" />
</div>
<div id="header">
  <div id="menu">
    <!--Home-->
    <li id="home">
      <a href="index.html">
        <img src="Iconen/Home.png" height="80px" alt="home" onmouseover="this.src='Iconen/Home2.png'" onmouseout="this.src='Iconen/Home.png'" />
      </a>
    </li>
    <!--Over Mij-->
    <li id="over">
      <a href="over.html">
        <img src="Iconen/Over.png" height="80px" alt="home" onmouseover="this.src='Iconen/Over2.png'" onmouseout="this.src='Iconen/Over.png'" />
      </a>
    </li>
    <!--Portfolio-->
    <li id="portfolio">
      <a href="portfolio.html">
        <img src="Iconen/Portfolio.png" height="80px" alt="home" onmouseover="this.src='Iconen/Portfolio2.png'" onmouseout="this.src='Iconen/Portfolio.png'" />
      </a>
    </li>
    <!--Contact-->
    <li id="contact">
      <a href="contact.html">
        <img src="Iconen/Contact.png" height="80px" alt="home" onmouseover="this.src='Iconen/Contact2.png'" onmouseout="this.src='Iconen/Contact.png'" />
      </a>
    </li>
  </div>
</div>

Upvotes: 1

Views: 40

Answers (2)

Tom291
Tom291

Reputation: 519

And you need to add:

margin: 0px;
padding: 0px;

To The body because some Browsers (like chrome) are having a standard margin and padding. PS: I wanted to comment but I cant because my Reputation is to low :(

Upvotes: 0

Hexana
Hexana

Reputation: 1135

You need to set your img to width="100%" or set a css class on the image for whatever %.

Upvotes: 1

Related Questions