I have this element as given below:
<div class="container-fluid main-body" [ngStyle]="{'background-image': 'linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 100%), url('+contentService.backgroundUrl+')'}">
<router-outlet></router-outlet>
</div>
In this, the background image is fetched from a RESTful api asynchronously and rendered dynamically, hence the contentService.backgroundUrl.
The CSS for this is as given below:
.main-body {
height: stretch;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
overflow-y: scroll;
}
This works as intended on Google Chrome and Safari. The intended effect is for this container to fill the viewport's full height in which the background image fits. However, Firefox and Microsoft Edge doesn't fill the full height of the viewport hence leaving a very large white section below the image.
Related
I am trying to get a background image to cover the entire window but am having trouble getting it to behave the way I'd want.
I currently have
'background-size': 'cover'
However, I find when shrink the width, the image tiles.
So I changed it to:
'background-size': 'cover',
'background-repeat': 'no-repeat'
But now, just white space appears below the image.
So then I tried
'background-size': 'fill',
'background-repeat': 'no-repeat'
However, now when the image is smaller than the window, it doesn't expand to fill the window.
What is the best solution so that the image covers the entire screen, doesn't tile, and doesn't have white space regarldess of the size of the image?
You could explicitly set the size of the background to cover the entire viewport by setting the height to 100vh (i.e. 100% of the available viewport height). This coupled with background-size: cover should handle your scenario :
body {
background: url('{background-url}');
background-size: cover;
height: 100vh;
}
Example
You can see an example of this in action here and demonstrated below :
Try this:
html {
background: url(...) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Should work with Safari 3+, Chrome Whatever+, IE 9+, Opera 10+, Firefox 3.6+
Source: css-tricks.com
you have to give him
height: 100vh
body{margin: 0px;}
div{
background-image: url(https://placekitten.com/400/600);
background-size: cover;
background-position: center;
height: 100vh;
width:100%;
}
<div>
</div>
I'm trying to make my background image always 100% width, but it's not working. With my current code, I get the picture where I want it, but there's a bunch of unwanted dead space (all the yellow background below pic). Overflow options don't fix this.
If I leave out the fixed height/width, then the image takes on 0x0 size for some reason; if I use background-size: cover, the image becomes too large, and no longer sits well in my parent container
jsFiddle:
http://jsfiddle.net/CSS_Apprentice/z7bojmbn/1/
.mainpic {
background-image: url('http://www.placehold.it/1922x1080');
width: 1922px;
height: 1080px;
background-size: contain;
max-width: 100%;
max-height: 100%;
background-repeat: no-repeat;
}
You can simply do:
background-size: 100% 100%;
This will keep the background image stretched 100% to the size of the container it currently is in. So, if it is in the body, it will fill the whole background of the page.
You might be interested in the cover declaration.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I have this css code, that creates an triangle and an background image fixed:
.post-wrapper_pic2 {
position: absolute;
width: 922px;
height: 1550px;
-webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%);
background: url("http://krishnaeverson.com/wp-content/uploads/2014/01/universe.png") center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10px;
}
But the problem is that the image is beeing resized and even though i put a hight quality image as background it appears pixelated. Can you figure what's wrong in what I'm doing?
You were apparently wondering that a CSS property named background-size leads to resizing of the image … so you should’ve just looked up what it does.
background-size:
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] specifies that the background image should be scaled to be
as large as possible while ensuring both its dimensions are less than
or equal to the corresponding dimensions of the background positioning
area.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of background-size.
I would like to add a background-image (circles in image below) to the body of a website i am working on, I need the image to stay flush against the container(white center with green and red banners in image below) so that even when the browser is maximized or minimized the image will stay flush to the container.
I'm not sure if i'm am saying this correctly so i've placed a visual as reference (below) along with my CSS code(below).
html, body{height: 100%;}
body{
background: #e5e5e5 url('../img/body_bck_lrg.gif') no-repeat -290px 190px fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*background-size: contain;
background-origin: border-box;*/
}
Try this:
body{
background: #e5e5e5 url('../img/body_bck_lrg.gif') center top no-repeat;
}
This should stick the background to the center top of the screen and will fill with #e5e5e5 for the rest of the space if screen resolution it too big.