-2

Good afternoon,

I want to a have a backround image on my HTML file but having issues in doing this.

<!DOCTYPE html>

<html>

<head>

<style>
body {
  background-image: src('img_BD1.jpg');
  background-repeat: no-repeat;
}
</style>

</head>

<body>
<img src="./img/BD1.jpg"/>
<a href="student.php">Student data</a>

</body>
</html>

This is my coding and I know the <img src=2./img/BD1.jpg"/> works but only as a small image and not the whole backround.

Thanks Adam

Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
Adam J
  • 1
  • 1
  • 4
  • 1
    Does this answer your question? [How do I stretch a background image to cover the entire HTML element?](https://stackoverflow.com/questions/235855/how-do-i-stretch-a-background-image-to-cover-the-entire-html-element) – iLuvLogix Nov 18 '21 at 13:09
  • You are not stating what's the problem – Johannes Nov 18 '21 at 13:12
  • I want to know how I can do the back round image from a folder and where on the format do I need to update with the correct coding – Adam J Nov 18 '21 at 14:05

3 Answers3

0

You should check the CSS background-size property read following.

https://www.w3schools.com/cssref/css3_pr_background-size.asp

savrum
  • 203
  • 1
  • 6
0

CSS:

.background-image {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    display: block;
}

HTML:

<img src='../img/BD1.jpg' class='background-image' />

That should do what your looking for

Bobby Mannino
  • 236
  • 2
  • 10
-1

You should place the background image in the html element because it always is at least the window height (the body element isn't). Then you can use one of the following options to make it cover the whole background:

background-size: auto;

background-size: cover;

You also can center and fix the background image like this:

background: url(images/bg.jpg) no-repeat center center fixed;

If you want to be sure that it works in every browser you can use the following CSS:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
pens
  • 15
  • 8
  • Thank you as I have found that it was all related to .xampp not accepting where the image file was kept but it has worked now after playing around with it for few days. – Adam J Nov 19 '21 at 20:32