Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to use "background-size : contain" in shorthand property with background with url.?

Tags:

css

below css is working with contain as it 's separately given as background-size but not by using the shorthand given in background

even i also eager to know the the parameters' sequence for background property in CSS

body { 
    background: #00ff00 url("smiley.gif") no-repeat fixed center;
    background-size:contain,contain; 
}

 body { 
    background: #00ff00 url("smiley.gif") no-repeat contain,contain fixed center; 
}  

but this is not working as i tried this shorthand method as above 
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>

there is not an issue to use separately but need to know that whether any way to use background-size:contain in shorthand background property

even you can just check it out by making change in W3School's example here is the url for it

click to check your way

like image 338
Himesh Aadeshara Avatar asked Sep 21 '25 06:09

Himesh Aadeshara


1 Answers

background: #00ff00 url("smiley.gif") no-repeat fixed center / contain; 

this should work.

like image 141
harshitpthk Avatar answered Sep 22 '25 21:09

harshitpthk