I want to fit image to whole screen. Please help


#1

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


@stetim94

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

    </body>
  </html>

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;
}

#2

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?


#3

http://workwallpaper.com/wp-content/uploads/2017/08/free_high_resolution_images_for_download-1.jpg

#4

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

https://www.w3.org/TR/CSS2/box.html#collapsing-margins

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


#5

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