I am using a Bootstrap template with a footer fixed at the bottom of the page. It is 50px height.
Then I want to use a background image that start at the top of the monitor and finish exactly at the top of the footer. It means: 100% height - 50px. This should happen in any monitor resolution.
How could I define that using CSS? Something like:
background-image {
height: 100% - 50px;
}
You can use the calc() function to handle this, which will use a given percentage of the viewport height along with some other explicit calculation:
/* This assumes you have a background-size class */
.background-image {
/* This sets the height to 100% of the viewport height minus 50px */
height: calc(100vh - 50px);
}
You could also use calc(100% - 50px) or any other combination / expression that you prefer.
Example
.background {
/* This sets the height to 100% of the viewport height minus 50px */
height: calc(100vh - 50px);
background: #0071bc;
}
<div class='background'> </div>
You can use background-size where first value is width and second value is height of background and then you can set height using calc() to 100% - 50px
div {
height: 300px;
width: 200px;
border: 1px solid black;
background-image: url('http://placehold.it/350x150');
background-size: 100% calc(100% - 50px);
background-position: center;
background-repeat: no-repeat;
}
<div></div>
Related
I'm trying to solve an issue with my own css stylesheet along with bootstrap. I'm trying to have an image set as a background image on my index page, but can seem to display it.
CSS in my stylesheet:
.main-image{
background-image: url(img/studio.png);
height:100%;
width: 100%;
}
HTML:
<section class="row main-image"></section>
Adding 100% width/height won't work here, because the parent of the element doesn't have static dimensions.
Instead of using height/width: 100%, use 100vh and 100vw.
1vh - Relative to 1% of the height of the viewport.
1vw - Relative to 1% of the width of the viewport.
So your code has to be:
body { margin: 0 } /* Removed the default body margin */
.main-image{
height: 100vh;
width: 100vw;
background-image: url('http://www.superedo.net/wallpapers/wallpapers/Android%20Tablet/Huawei%20Mediapad%2010%20Fhd/huawei_mediapad_10_fhd_005.jpg');
background-size: cover;
}
<section class="row main-image">
<!-- -->
</section>
You need to define what space the image should be in
Fiddle example here
.main-image{
height: 500px;
width: 100%; /* responsive */
background-image: url('https://www.prestigeanimalhospital.com/sites/default/files/08-cat-cancer-4.jpeg');
background-size: cover;
background-position: 100% 50%;
}
<section class="main-image"></section>
You can control what is shown with background-position: 100% 50%;
100% is X - the horizontal value.
50% is Y - the vertical value.
Or do it with background-position-x and background-position-y
I have a sprite that I am using and I wanted to reuse one of the images in the sprite but at half the size so I thought if I just used background-size:50%;, it would resize the background by 50%, but it seemed to quarter the size for some reason:
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 112px;
height: 112px;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
background-size: 50%;
}
<div class="test"></div>
<div class="test half-size"></div>
Now I can fix this by having the background size as 113%:
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 112px;
height: 112px;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
background-size: 113%;
}
<div class="test"></div>
<div class="test half-size"></div>
But why is the background-size greater than 100% when the image is smaller than the original?
Is there a set calculation I can apply when figuring out how to resize the sprite?
As per the W3C Specs:
A percentage is relative to the background positioning area.
and background positioning area is one of either border-box or padding-box or content-box based on the background-origin property. Here you haven't specified any value explicitly for this and so its default value of padding-box is used. This element has no padding and so it's equal to content-box.
Your image is 126 x 112 px but width and height of the element is 56 x 56px, so a background-size: 100% (which is inferred as100% auto) would mean the image is scaled down till it has a width of 56px. Now to get to 56px, the width is scaled down by 44.44% of the image's original size. So, to preserve aspect ratio (as one value is auto), the height of the image is also scaled down to 44.44%, which is, 49.78px (or 50px approximately). As you can see the calculated background image's dimensions are 56px x 50px (and not 56px x 56px) and so it doesn't cover the box entirely. You can see this clearly in the below snippet.
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 56px;
height: 56px;
border: 1px solid red;
background-size: 56px 50px; /* see how this is same as 100% or 100% auto */
}
.test.t2 {
width: 56px;
height: 56px;
background-size: 100%;
}
.test.t3 {
width: 56px;
height: 56px;
background-size: 100% auto;
}
<div class="test"></div>
<div class="test t2"></div>
<div class="test t3"></div>
Note: The 56px width includes the white-spaces on the right side of the circle and so even though it covers the entire width of the element, you will still see a gap. This is due to the image itself having a space.
Now when you set background-size: 50% ( = 50% auto), it would mean the max width of the image can be 28px and so it is scaled down by 22.22%. This means the height is also scaled down 22.22%, which is, roughly 25px. This is why you see it as being almost quarter size (but not exactly quarter). This can again be seen visually in the below snippet:
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 56px;
height: 56px;
border: 1px solid red;
background-size: 28px 25px; /* again see how they are same */
}
.test.t2 {
width: 56px;
height: 56px;
background-size: 50%;
}
.test.t3 {
width: 56px;
height: 56px;
background-size: 50% auto;
}
<div class="test"></div>
<div class="test t2"></div>
<div class="test t3"></div>
When we set background-size: 113%, it means the the width can be max 113% of the container's width, which would be, 63.28px and this is roughly 50% of the original image's width. Since width is scaled down by 50% from the original image, its height is also scaled down by same amount and so the resulting value is 56px (which is nothing but the height of the element and so it covers the box vertically). Now, since you've also given the background-position as left-top, the image is placed with respect to the left edge of the container and so the white-space which is present on the right side of the image (the other 7.28px) is invisible as the box will not show anything more than its width.
You've already answered the second part of your question and so I'm not going over it again.
For Future Readers: For OP's case, it might not be possible to get rid of the white-spaces because it is part of a sprite but if your case is different and you can get rid of the spaces then that is the best.
If the white-spaces on the right side are removed and the image is cropped to its actual size (which is, 112 x 112px) then just setting background-size: 100% 100% (or even 100% auto) would be enough. The container element's dimensions when set as half or quarter (or whatever) size of the original will automatically do the scaling for us.
.test {
background: url(https://i.stack.imgur.com/UaCct.png) left top no-repeat;
width: 112px;
height: 112px;
background-size: 100% 100%;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
}
.test.quarter-size {
width: 28px;
height: 28px;
}
<div class="test"></div>
<div class="test half-size"></div>
<div class="test quarter-size"></div>
After a lot of playing around with the sprite I have come to the conclusion that it is width of full sprite divided by width of sprite part and times it by 100 will give you the x-axis background size percentage and then do the same with height for the y-axis background size.
So in my case to get the x percentage, it was
( 126px / 112px ) * 100 = 112.5%
Full width of sprite width of sprite part
and to get the y percentage it was
( 112px / 112px ) * 100 = 100%
Full height of sprite height of sprite part
This means that a background-size: 112.5% 100% will work for any square div with that sprite:
.test {
background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
width: 112px;
height: 112px;
background-size: 112.5% 100%;
border: 1px solid red;
}
.test.half-size {
width: 56px;
height: 56px;
}
.test.random-size {
width: 90px;
height: 90px;
}
<div class="test"></div>
<div class="test half-size"></div>
<div class="test random-size"></div>
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
Since a little while we have the awesome background-size: cover and background-size: contain CSS properties.
What I'm looking for is a way to implement a combination of both. Lets call it the 'title-safe' area.
Basically in my background there is on each axis an area that is fine if it disappears/crops if the bounding box is not the appropriate size, but there's an inner area that absolutely must be visible, and we can use letterboxing to ensure this is true.
Some more info:
My background image has a 3:2 aspect ratio.
For example, this could be 300 x 200px.
Viewed on a 4:3 screen, this would become 266.66 x 200px
Viewed on a 16:9 screen, this becomes 300 x 168.75 px
The inner box inside both these 4:3 and 16:9 ratios is an area of 266.666 x 168.75 px. I want to make sure that if people watch the image on other/weirder aspect ratios that inner area remains visible at all times, and I'm calling this the 'title safe area'.
You can have 3 separate styles, and change them with media queries based on the aspect ratio
I have also changed the border color so that it's easy to know which style applies
html, body {
height: 100%;
}
.test {
width: 90%;
height: 90%;
border: solid 2px black;
margin: auto;
background: url(http://i.stack.imgur.com/ZmhEE.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: contain; /* changed by media queries */
}
#media screen and (min-aspect-ratio: 16/9) {
.test {
border: solid red 2px;
background-size: auto 120%;
}
}
#media screen and (max-aspect-ratio: 4/3) {
.test {
border: solid green 2px;
background-size: 120% auto;
}
}
<div class="test"></div>
I figured it out.
Take the following example for a html document:
<div class="container">
<div class="inner">
</div>
</div>
The inner css class will get a background-image that's always in the 3:2 aspect ratio.
The container has the following CSS rules. Note that the width and height are static here, but they can have any value, including percentages You can tweak them to ensure that the system works.
.container {
width: 900px;
height: 450px;
overflow: hidden;
}
Then the inner css needs the following rules to behave correctly:
.inner {
/* Set the background image. Must be 3:2 aspect ratio! */
background-image: url('background.jpg');
/* Fill up the container.*/
width: 100%;
height: 100%;
/* This is the default in any browser, but many people set it to
border-box these days for every element. It must be "content-box"
for this to work. The key thing here is that the width/height
cannot include the padding.
*/
box-sizing: content-box;
/* Normal CSS contain behavior */
background-size: contain;
background-repeat: no-repeat;
/* Always go to the center */
background-position: center center;
/* This will cause the background to extend beyond the content and
into the padding.
*/
background-clip: padding-box;
/* These numbers are just based on trial and error and not exact.
I tried to figure it out with Math, but my math was wrong. These
are fairly close approximations.
Effectively the width + the padding becomes the total 3:2 image
and the total image MINUS the padding = the title safe area.
*/
padding: 6% 8% 6% 8%;
/*
These margins ensure that the image is still centered.
The overflow:hidden on the container element make sure that
there's no scrollbars.
*/
margin-left: -8%;
margin-top: -6%;
}
More specifically, is it possible to scale a tiled background image using CSS3's transform:scale(x,y)?
While you can't use transform:scale(), if you know the final size of the background image that you need, you can you can use background-size to get the same effect.
.selector {
background-image: url(http://path/to/image.png);
background-size: 200px 100px;
}
However, if you always want to, say, "double" the width of the image that you use as a background, then that doesn't seem to be possible at this time.
EDIT: Note that while the background-size style supports % based parameters, it's not as a percentage of the image size, but the size of the window.
You can use :
background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;
(or)
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
(or)
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
I'm not good in CSS. But just the idea: create background div with tiled background (using z-index) and scale it. It should work
Yes you can scale it but try using percentage.
background-size: 100%;
But you need to consider the different resolutions of a screen. 4:3 4:9 etc.
I would recommend you to use this jQuery script. jQuery Strech Background