HTML background image to fit whole page + img src are broken

Question

Ok so i'm new to angular and I have a project to do, im trying to put those 4 buttons and a background image to fit the whole page. I put the buttons in a table to help me arrange it but for some reason the background image fit only behind those buttons = table.

Also, whenever I try to load an image from my computer I get the broken image error. The picture location is the same as the HTML code.

One more thing, is there any fast way to arrange buttons,images etc?

Thanks in advance :)

<body background="here is the url of the background">

<table class="center" >
    <tr>
        <td><button class="btn btn-1 btn-sep icon-info">A</button></td>
        <button class="btn btn-4 btn-sep icon-send">B</button>
    </tr>

    <tr>
        <td><button class="btn btn-2 btn-sep icon-cart">C</button></td>
        <td><button class="btn btn-3 btn-sep icon-heart">D</button></td>
</tr>
</table>

and the result looks like this https://i.stack.imgur.com/rxl4q.jpg i want the background to fill also the white areas...

Hint: body will fit the space occupied by the don (the table in you case) and not an inch more — Lelio Faieta, Dec 20 '19 at 12:30
Your HTML is invalid. Fix that and see where you stand then. — Rob, Dec 20 '19 at 12:32
Hint 3: as also the answers show, use a css for styling and not the inline style attribute. It helps readibility and code maintenance — Lelio Faieta, Dec 20 '19 at 12:33
Does this answer your question? [CSS: stretching background image to 100% width and height of screen?](https://stackoverflow.com/questions/22887548/css-stretching-background-image-to-100-width-and-height-of-screen) — Alex, Dec 20 '19 at 12:37

score 0 · Answer 1 · answered Dec 20 '19 at 12:30

Just add a css rule for the background, like:

body { background: white url("http://lorempixel.com/1600/900") no-repeat fixed center; }

And for your buttons, you can just let them naturally flow inside a predefined container, or use absolute positioning inside a container, width percentage width/height values.

LE: if you want to kee your CSS inline, just place that body css rules inside a "style" property. i.e. <body style="background...">

score 0 · Answer 2 · answered Dec 20 '19 at 12:30

To apply a background image to the whole page, there's a great example on CSS Tricks:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')";
  background-size: cover;
}

Those last two filters are for IE.

score 0 · Answer 3 · answered Dec 20 '19 at 12:34

0

Just add a background using CSS like

body{
background-image: : url("path");
background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* This will make image fit according to body size*/
}

please make sure you are using correct image path or you can check on Network tab on the debugger that your image is loading or not

answered Dec 20 '19 at 12:34

Nitin tiwari

664
1
8
23

I tried this but it doesn't work when I try to put a photo from my PC but does work for a photo from the internet via url... https://imgur.com/hjrUB1W – HelpMePlease Dec 20 '19 at 17:04
then check your url of image – Nitin tiwari Dec 22 '19 at 17:17

score 0 · Answer 4 · answered Dec 23 '19 at 05:14

Please check image file path. you have used \ instead of / in image path. that's why your image is broken. your path should look like this:

<img src="images/photo.jpg" alt="aaa">

Try it. This will run good.

And where do you want to set background image ? to the whole body or only to the table's background ? Because in above code, you want to set bg-image to the body and as per the screen shot of your code, you have set image to the div which id is bg.

Please provide us your proper code so we can find better solution. Thank you.

score 0 · Answer 5 · answered Jan 01 '20 at 06:04

You can use the following CSS code for your requirement.

body, html {
  height: 100%;
}

.bg {
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

HTML background image to fit whole page + img src are broken

5 Answers5