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