HTML DIV background

Question

I have a <div> that includes a background image like this:

<div style="
  background: url('file://D:/DwyaneJohnsonBaller.jpg');
  width:100%; 
  height:1200px; 
  background-size: 100%;">
</div>

I've also tried to make the style of the <div/> in CSS format.

The problem I'm facing is that when I display the HTML file, I find some white spacing from top, right, left and bottom (i.e not fit with the whole web page).

possible duplicate of [CSS background image to fit width, height should auto-scale in proportion](http://stackoverflow.com/questions/9262861/css-background-image-to-fit-width-height-should-auto-scale-in-proportion) — connexo, Aug 03 '15 at 13:48
when width:100%, height should not be set in px. That is what creates the white space. — Blix, Aug 03 '15 at 13:51

score 2 · Answer 1 · edited May 23 '17 at 12:07

2

To make backgound cover all of element, you should specify background-size as cover.

Previously on Stack Overflow: https://stackoverflow.com/a/9265035/211131

edited May 23 '17 at 12:07

Community

1
1

answered Aug 03 '15 at 13:45

Kaspars Foigts

159
1
4

score 2 · Answer 2 · answered Aug 03 '15 at 13:47

2

I sounds as though you need to remove the default margin from the body

body {
    margin: 0;
}

Try looking into "CSS Reset". There are several, just google that term.

answered Aug 03 '15 at 13:47

Paulie_D

107,962
13
142
161

Ronald P Mathews · Accepted Answer · 2015-08-03T14:04:54.243

2

Use - margin: 0;

You can solve this by adding the following code to the head part of your html file:

<style>
  body{
  margin:0;
  }
</style>

Without this browser will display the content with blank spaces on all sides.

edited Aug 03 '15 at 14:04

answered Aug 03 '15 at 13:47

Ronald P Mathews

2,178
1
22
26

Kebab Programmer · Answer 4 · 2015-08-03T13:55:23.380

0

in your CSS file, you can input the following lines of code to make sure you get the right image, and also you can modify the size of the image to remove the white lines you are experiencing

body 
{
  background-image:url("otherimages/background.jpg");
  background-size:105%;
}

Also, since "background-size" is there, you don't need to have "width and height" parameters. You can experiment with this, to make sure it works with your own project

edited Aug 03 '15 at 13:55

answered Aug 03 '15 at 13:49

Kebab Programmer

1,213
2
21
36

why are you using a div to display a background image? – Kebab Programmer Aug 03 '15 at 13:57
i will use this div afterwards to include buttons or labels at the end of the image, so i suggested that a div having a background image would be nice, and also i tried an img attribute – Omar Abdel Meneim Zaki Aug 03 '15 at 14:00
there is a problem google chrome leaves white spacing from the top,right,left and bottom of the image and i tried margin, padding background-size and all of these stuff – Omar Abdel Meneim Zaki Aug 03 '15 at 14:01

score 0 · Answer 5 · edited Aug 03 '15 at 15:04

0

body{
 margin: 0;
 padding: 0;
}

edited Aug 03 '15 at 15:04

Andy

49,085
60
166
233

answered Aug 03 '15 at 13:57

Sebastian Witeczek

133
1
11

HTML DIV background

5 Answers5