htmlcssbackground-imagejoomla3.0background-size

I can only find how to fit a smaller background to a bigger size page using I want to fit a 5000px background to the width of smaller pages

I have a 5000px plus bg image which I want to use as a backgroun but I want it to fit the width. I can only apply the CSS to the body or html. I cant add any div or any other HTML to the page.

My idea is to have a background stretch to the width of the page. If I use a 1024px width it works perfectly with a 1080P screen size but on a 2k or 4k screen the background is blurred.

So I thought let me use an image that will fit 5k screen. So that works properly but in a 1080P screen the BG is displayed at full size

The background has "header image/artwork" that is now outside the screen also it now occupies one third of the screen vertically.

I wanted it to reduce size to 1080P so the full artwork is seen and also the empty space below is seen.

I tried searching for solution and all I have seen online and on stackoverflow can ony stretch the image.

body {
background-image = url("myimage.jpg");
background-size = cover;
}

The above code does not work I can only add a css code like above to an external stylesheet. Inline css like below I cannot add.(which works)

body style="background-image: url(images/backgroundchristmas1.jpg);background-size: cover;"

When I use the same code I have used many solutions it displays the BG in full size that 5000px it does not reduce the size to fit a 1080p screen.

I am aware of the solution that uses a div at 100% and then apply the background to the div. But I cannot edit the HTML of the page I can only add the CSS to the Body tag or html tag in a css file as it is a Joomla template

Please let me know if there is any other solution

Thanks

Solution

  • you're saying you can css body or html, so add css to the body with a background image plus a size cover

    body {
  background-image = url("myimage.jpg");
  background-size = cover;
}

    check the link given by SioGabx (French), or this one https://developer.mozilla.org/en-US/docs/Web/CSS/background-size (english), to check other values