Jump to content
Rickname

To which HTML elements can CSS background properties be added?

Recommended Posts

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

background-size:contain;

.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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! :D

Share this post


Link to post
Share on other sites

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! :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×