To which HTML elements can CSS background properties be added?

[Rickname]

The context here is adding images. I need to be able to set the background property

background-size:contain;

.

[dsonesuk]

Only container elements div, paragraph, h2 etc that have an opening tag such  as  <div> and closing tag </div>, not void elements such as area, base, br, col, hr, img (why would you with img?)

[Rickname]

I have been trying with container elements, but do not know what I am doing wrong.

		<main>
			<div id="index"></div>
		</main>

div#index{
	background-image:url("./Grafikk/Bilete/kids-2985782.jpg");
	background-attachment:fixed;
	background-size:contain;
}

 

Edited January 29, 2018 by Rickname

[dsonesuk]

The element requires content OR a height: defined, because at the moment its height is zero, you won't see anything if height is zero.

[Rickname]

It is possible to set an undefined height so the height can be set by abstract background-size values, or otherwise maintain this possibility?

And which content could be added for giving the same effect?

[dsonesuk]

Background images are not like img element images as there is nothing detectable to determine the height. It relies on content such as h1 - h6, paragraphs, section, article, img elements that will make up content to give the parent element with background image height so the background image can be seen fully. The only exceptions are html, body elements where the background image will fill height of browser viewport or browser window regardless the height of html and body elements.

Depending on your requirements you can add a min-height: to this element enough to show background-image, then it will extend if content goes beyond this height.

Edited January 29, 2018 by dsonesuk

[Rickname]

On 2018-1-29 at 10:16 AM, dsonesuk said:

The only exceptions are html, body elements where the background image will fill height of browser viewport or browser window regardless the height of html and body elements.

So it should work giving <main> a background property in CSS? What's then wrong with the code I posted above? Even adding 

min-height:50%;

doesn't makes the background image appear.

[dsonesuk]

Because height of html and body elements are 0, 50% of 0 is 0. Use px units or vh (viewport height, 50vh will be 50 percent of viewport or browser window height).

[Rickname]

Solved this issue, and the solution was too simple to be considerable.

		<main id="index">
			<a href="bilete.html"><img alt="bakgrunnsbilete" src="./Grafikk/Bilete/kids-2985782.jpg"></a>
		</main>

main#index a img{
	width:100%;
}

Anyway, thanks a lot to you @dsonesuk for bearing with me through this thread! 

[Rickname]

Solved this issue, and the solution was too simple to be considerable.

		<main id="index">
			<a href="bilete.html"><img alt="bakgrunnsbilete" src="./Grafikk/Bilete/kids-2985782.jpg"></a>
		</main>

main#index a img{
	width:100%;
}

Anyway, thanks a lot to you @dsonesuk for bearing with me through this thread!