This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
So I have that small white space after the image, how can I fix that?
Here is code of my class:
.hero-image2 {
background-image: url("/assets/kava.jpeg");
width:33%;
right:0px;
position: fixed;
min-height: 100%;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-repeat: no-repeat;
bottom:0px;
}
And here is the other class which is on left side:
.tekst2 {
width: 67%;
position: absolute;
left: 0px;
height: 100%;
font-family: 'Playfair Display', serif;
font-size: 15px;
}
Here is what it looks like:
enter image description here
You can give negative margin bottom value for example margin-bottom=-30px;
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm not an html/css guy but the guy who usually does this quit so it fell into my lap.
I have a page where there is a background image to fill the entire page. I found some sample css online to do this:
html {
background: url(background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
What I want to do now is overlay some text on this such that it appears at the centered at the bottom of the page (not right at the bottom, maybe 50 px up from bottom). I tried a bunch of things but can't seem to get it quite right.
Depending on what your goal is you can use a combination of position: absolute and set the bottom and left attribute, like so:
body {
background: skyblue;
}
.footer-text {
display: block; /* just so IE will correctly render it */
position: absolute;
z-index: 1000;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
}
<footer class="footer-text">footer text</footer>
html:
<body>
<div class="bottomme">
<p>I'm some text at the bottom of the page</p>
</div>
</body>
css:
html
{
background: url(https://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
font-size:16px;
}
body
{
width:100%;
height:100vh;
margin:0;
border:1px solid red;
display:flex;
flex-direction:column;
justify-content:flex-end;
}
.bottomme
{
font-size:3rem;
line-height:1.25em;
color:white;
text-align:center;
margin-bottom:1em;
border:1px solid blue;
}
background-position: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
push div to bottom of page: https://codepen.io/carolmckayau/pen/bmaOyK
Without knowing the code, my suggestion would be to add the text in it's own tag (e.g. a p-tag <p>your text here</p> ) and then position the text with
position: absolute;
bottom: 50%; /* Depending on how low/high you want the text */
left: 50%;
transform: translate(-50%, -50%);
W3schools.com has a great example on this right here: https://www.w3schools.com/howto/howto_css_image_text.asp
My CSS background-image not fulfill the bottom of my webpage, there are still some white space on the bottom of my webpage, how can I fulfill the webpage with my background image?
html, body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
background:url('semi_buffet.jpg');
background-repeat: no-repeat;
background-position:center center ;
background-size: cover;
font-family:"Times New Roman", Times, serif;
}
you could try,
object-fit:contain;
or,
object-fit:cover;
I believe your code should be working but try this:
body {
background-image: url('https://images.unsplash.com/photo-1531490744426-b6fc85d35692?
ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d4d73c712fdb8799f077d7c2f77af115&auto=format&fit=crop&w=2467&q=80');
background-size: cover;
background-repeat: no-repeat;
}
I can't get my background image to repeat on the y-axis when it is viewed on a mobile device. currently when on desktop the page can't scroll and the background image fills the screen. but if you move to tablet or mobile you need to scroll and the image is not repeating. My current code isn't much:
body {
background-image: url("../assets/BG.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: repeat-y;
background-position: center center;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
Any help would be great.
Gif of issue: https://imgur.com/a/jX19E
erase background-size: cover; from that rule - this will always fill the full body element, also the part that appears when scrolling. Add background-size: 100% auto; instead and change the position to background-position: left top to make sure the image covers the complete width, starting from the upper left edge.
(BTW, position: absolute; for the body element is rather strange)
Here's a snippet that demonstrates it with a placeholder image:
body {
background-image: url("http://lorempixel.com/600/100/food");
background-size: 100% auto;
background-repeat: repeat-y;
background-position: left top;
margin-top: 0;
position: absolute;
height: 100%;
width:100%;
margin: 0;
}
I have the following div in an angular view, this is all that is in the view as of now
<div class="home-container" ng-controller="ctrlHome" >
HELLO
</div>
I want to set it's background image to take up the rest of the page or the same amount as the body
here is the css
html {
height: 100%;
}
body {
font-family: "Hero", Times, serif !important;
min-height: 100%;
}
.home-container {
background: url('../images/94H.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
clear:both;
}
All I am getting it the image the height of the text HELLO which is 20px
This is probably something easy I am screwing up but it's frustrating non the less
Thanks in advance
Use height: 100% instead of min-height. Also add html to the CSS rule since body needs a parent element to calculate height: 100%
html,
body {
font-family: "Hero", Times, serif !important;
height: 100%; /* Changed */
}
.home-container {
background: url('http://placehold.it/600x1200') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
clear: both;
}
<div class="home-container" ng-controller="ctrlHome">
HELLO
</div>
This question already has answers here:
Can I have multiple background images using CSS?
(8 answers)
Closed 7 years ago.
I'm trying to add two backgrounds in CSS but one image to fill the entire background and the other to be aligned on the centre right of the page. Here is a section of my current StyleSheet:
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-color: #cccccc;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
}
I've tried separating the URLs with a comma and then separating the positioning by comma but this doesn't work. Any ideas?
Set the height of the parent element to 100% i.e. to html. Then used the cover value of background-size to occupy full space of the underlying image. Set right center to the 'background-position' of the first image.
html,
body {
height: 100%;
}
body {
background-image: url("http://placehold.it/300x300/333"), url("http://placehold.it/1200x1200");
background-position: right center, center center;
background-repeat: no-repeat;
background-size: auto auto, cover;
color: #384047;
font-family: "Nunito", sans-serif;
height: 100%;
}
CSS3 supports multiple background images;
body {
font-family: 'Nunito', sans-serif;
color: #384047;
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center center, left top;
background-repeat: no-repeat,no-repeat;
}
refer http://www.css3.info/preview/multiple-backgrounds/
You can see this tutorial : http://www.css3.info/preview/multiple-backgrounds/
example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
Refer this.it will help you...
body {
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center right, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}