I have this to center it vertically and horizontally:
html {
width: 100%;
height: 100%;
background: url(/icon.png) center center no-repeat;
}
That works, but now I am trying to add padding. I would like to have 10px or 20px padding on all sides, so for mobile it has some padding. I've tried this:
html {
width: 100%;
height: 100%;
background: url(/icon.png) center center no-repeat;
background-origin: content-box;
padding: 20px;
}
But the right and bottom go over the viewport, so scrolling occurs and it's not centered exactly anymore. I've also tried using margin. Wondering how to get this to work. I would like to use CSS background-image if possible, instead of <img>.
Add box-sizing:border-box;
html {
width: 100%;
height: 100%;
background: url(http://www.fillmurray.com/460/300) center center no-repeat;
background-origin: content-box;
padding: 20px;
box-sizing:border-box;
}
This happens because CSS uses, by default, the content-box box-sizing method. It means that width = content width + padding + border and height = content height + padding + border.
You can switch to the border-box box-sizing method, that includes padding and border in width and height.
html {
width: 100%;
height: 100%;
background: url(/icon.png) center center no-repeat;
background-origin: content-box;
padding: 20px;
box-sizing: border-box; /* switches to border-box method */
}
I hope that helps you!
Related
I want the background image I am using to have 10px margins. But every time I try, it only works on the left side. How can I give my background image equal space on each side?
.login-page {
display: flex;
flex-direction: column;
background: url("../src/Assets/images/Books-background.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
}
Hou probably need 2 containers. Set a padding on the parent and the background on the child.
here an example with html & body, but it could be a div within another div, the method remain the same , padding on the parent, background cover on the child. .
html {
background: white;
padding: 0 10px;
}
body {
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/id/20/3670/2462) center / cover
/*padding-box no-repeat bgcolor have no effect on background:cover ... */;
}
I have this login page with a footer. the footer keeps chaning its height to the extent that it overlaps with the body. If someone plesae can help. I do not what is going on here. I would like to have the height fixed with no overlaps while taking into account the resizing
this is my css
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 30px;
margin-top: auto
}
I removed position it seems better, but the footer has become outside the body/html background
this is the css of html and body
html, body {
height: 100%;
background: url('../images/bg.jpg') no-repeat;
background-size: cover;
}
I can only assume, but i can see what's wrong. Try this:
html, body {
min-height: 100%; /* fixed it, because the regular height 100% will cause that white background of footer*/
}
body {
/* we need background image only in body */
background: url('../images/bg.jpg') no-repeat;
background-size: cover;
}
.footer {
/* we should remove position or set it relative */
width: 100%;
white-space: nowrap;
line-height: 30px;
margin-top: auto
}
Should work perfectly.
I have a div with a background image. I want the image to always have at least a 1% left and bottom margin/padding. The container of the div is a dynamic absolutely positioned box which can have a size of 5% or 95% (and everything in between with CSS transition).
I chose to achieve this by putting the background-image on that div which has min-height of 5% and width of 100%. The background is not repeating, centred and set to be contained within the area (background-size: contain). I decided to go with a 1% padding and background-clip CSS property to content-box, which should mean that the background covers only the content which starts at 1% away from the border. I chose padding and not margin, because box-sizing is set to border-box, therefore a width 100% with additional padding would not increase the size of the div which is not the case with margin.
However this did not work as expected:
When using background-clip: content-box together with background-size: contain, the background is contained within the border-box and not content-box and the padding cuts away the areas between the content and border.
Example:
div {
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
float: left;
width: 200px;
height: 200px;
}
.clipped {
border: 1px solid blue;
padding: 20px;
background-clip: content-box;
}
.normal {
border: 1px solid green;
padding: 20px;
background-size: contain;
}
<div class="clipped">
</div>
<div class="normal">
</div>
So the questions are:
Is this the normal behaviour?
Where is this documented?
What would be the solution to achieve what I need?
p.s. I am not English so apologies for possible mistakes or misconceptions. Also I will try to explain better in case you did not understand the issue.
Yes, this is normal behavior. The content-box does not mean the image is sized within it, it means it gets clipped by it.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
In below sample I used a pseudo class to achieve it
div {
position: relative;
float: left;
width: 200px;
height: 200px;
border: 1px solid blue;
}
div::before {
content: '';
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
}
<div>
</div>
I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/
Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/