I want to fit image to whole screen. Please help

Hello, I want to remove the white space appearing at the top. Please help.


<!DOCTYPE html>
	  <title> Mukul Vashishtha </title>
	  <link href = "style.css" type = "text/css" rel = "stylesheet"> 
      <div class = "bg">
	    <div class = "name">
          <h1> <i> Mukul Vashishtha </i> </h1>


body, html {
    height: 100%;
    margin: 0;

.bg {
    background-image: url("2.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

.name {
	margin-left: 6%;
	margin-top: 4%;
	font-size: 1.2em;
	color: white;

the image won’t load, given it only exist local. Can you also upload the image so i can use it in something like jsbin?


the gap is caused by collapsing margin of the h1 and image, as explained here:


it also shows how to trouble shoot this image (padding and border for example)

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.