Jump to content

To which HTML elements can CSS background properties be added?


Rickname
 Share

Recommended Posts

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
Link to comment
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?

Link to comment
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
Link to comment
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.

Link to comment
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

Link to comment
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

Link to comment
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
 Share

×
×
  • Create New...