i have been trying to solve this for like 2 hours now.. tried multiple guides, nothing worked.
Here is my css:
body {
margin:0;
background:url('chalk.jpeg');
}
html, body {
height: 100%;
}
.welcome{
text-align: center;
position:relative;
height:100%;
background:rgba(38, 36, 15, 0.7);
}
However, for some reason, the page looks like this: https://i.imgur.com/iPvMTk1.jpg
I want the welcome div background to be on top of the body background image until the end of the page. Tried many solutions but nothing would work.
You can do it with viewport units where the body element takes 100% of the viewport height with the height: 100vh, then just stretch the .welcome div with height: 100%:
html, body {
width: 100%;
height: 100vh; /* 100% of the viewport height */
margin: 0;
}
body {
background: url('http://placehold.it/1600x900') no-repeat center center; /* modified */
background-size: cover; /* recommended / also try the "contain" */
}
.welcome {
text-align: center;
position: relative;
height: 100%;
background: rgba(38, 36, 15, 0.7);
}
<div class="welcome">welcome div</div>
Related
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.
So I'm trying to make it so that a full page image shows in the page, and resizes responsively on different screens so that it always takes up the whole screen. I looked it up on w3schools and other questions on Stack, but it seems that no matter what I do it never works, I checked if something is overriding my CSS in the browser developer tools but it seems there is nothing wrong, it just simply doesnt work. I'm using bootstrap and the div which background image should be full page is a col-12, would that cause the problem? This is my css:
body, html {
height: 100%;
}
#image-div {
background-image: url("paper.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
color: white;
background-color: rgba(0,0,0,0.5);
background-blend-mode:darken !important;
font-size: 20px;
}
and the html:
<div className="row" id="calculator-row">
<div className="col-12" id="image-div">
<div className="over-image">
<p class="try-calculator">
Calculate the possible return of investments
</p>
</div>
</div>
<div className="col-12" id="calculator-div">
<h1>Return of Investments</h1>
<BenefitCalculator />
<strong>*The average conversion percent is 4, but enter yours in case you know it</strong>
</div>
</div>
EDIT: Forgot to mention I am also using REACTJS
Try backgound-size: cover, contain;
If this does not work send an example of you code. Also height in percentage is always a bad idea. If this is for the element to be as tall as the page use 100vh or some other method. Also note that you will probably need a media query for portrait and landscape orientation.
Try this snippit:
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.row-fw {
width: 100vw;
height: 100vh;
}
.col-12 {
flex: 0 0 100%;
max-width: 100%;
}
#image-div {
background-image: url("https://placekitten.com/g/1920/1080");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
display: block;
width: 100%;
color: white;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: darken !important;
font-size: 20px;
}
<html>
<body>
<div class="row row-fw">
<div id="image-div"></div>
</div>
</body>
</html>
You could also be using height: 100vh; & width: 100vw; (vw = viewport width, vh = viewport height).
If the parent gets bigger than the size of your screen, so will the background. 100vw & 100vh will only use the viewport width & height.
just add below class to the parent div of image, it will scale itself as per screen sizes.
.img-responsive -> Makes an image responsive (will scale nicely to the parent element).
I have a such a situation: http://jsfiddle.net/5axmtw9g/3/
<div class="content inner clearfix1 has-left-sidebar">
<div class="sidebar-left-menu prepended"></div>
<div class="content-middle">
<section id="about-stat" class="clearfix1 about-stat-section">
<h1>Some title</h1>
</section>
</div>
</div>
.inner {
margin: 0 auto;
width: 600px;
}
.content.inner {
position: relative;
}
.content .sidebar-left-menu {
height: 100%;
left: 0;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
float: left;
width: 160px;
}
.sidebar-left-menu {
background: #3b86c4 none repeat scroll 0 0;
color: #fff;
}
.content-middle {
margin: 0 0 10px 170px;
}
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat fixed 0 0;
height: 590px;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
}
As you can see in the fiddle the fixed background image is positioned to the window not to the wrapper. I would like the image to be positioned at the start of "content-middle" div, as expected. Using any solution with background-size:cover is not working for me, as I shall avoid of image stretching.
Would be really grateful for help as I stacked on this and can't find a working solution.
Thanks in advance!enter code here
Try jquery
posBg();
$(window).resize(function() {
posBg();
})
function posBg(){
var posLeft=$('#about-stat').offset().left;
var posTop=$('#about-stat').offset().top;
$('#about-stat').css("background-position", posLeft+"px "+posTop+"px");
}
Fiddle demo http://jsfiddle.net/5axmtw9g/9/
I think you can achieve what you want by adjusting your background to the following:
#about-stat {
background: rgba(0, 0, 0, 0) url("http://quotesnhumor.com/wp-content/uploads/2014/12/Funny-Minions-Pictures-and-Quotes.jpg") no-repeat center top ;
background-size: 100% auto;
The center-top will position the background to the right place. the size will display it at 100% width without adjusting the aspect-ratio. Now you just have to go for a bigger height div to show it full size (or a different background-image).
Demo
Background image X AXIS is 50% plus half the width of it's sibling container
https://codepen.io/AliKlein/pen/dVrmVO
section {
height: 100vh;
background-image:
url(https://source.unsplash.com/collection/194676/3);
background-size: cover;
background-attachment: fixed;
background-position-y: center;
background-position-x: calc(50% + 12.5vw);
}
I have a Image which I want that takes the whole screen but is leaving some white space at the top and at the left side of the screen and I don't know why is doing it. I attached the code of it.
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Add this css line:
body{margin:0;}
http://jsfiddle.net/mm08hruf/
You need to reset the margin on the body.
/* margin reset */
body {
margin: 0px;
}
img {
background: 0px 0px / 100% 100% no-repeat scroll rgb(12, 12, 12);
height: 100%;
width: 100%;
position: fixed;
}
<img src="http://www.morefree.net/wp-content/uploads/2013/03/black-wallpaper-01.jpg">
Try
html,body{
padding:0;
margin:0;
}
I have the following CSS code:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 900px;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
And that makes the coverage of 100% in width, but only 900px in height. I tried to add the height: 100% but that didn't work. So far the webpage looks like this http://i.imgur.com/RMyIO4Y.jpg and I want to make the Video section not visible when User resize his browser to the full screen. How can I do that?
Thanks.
You can also set the height to
height: 100vh;
http://caniuse.com/#feat=viewport-units
Example css for Hero template:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 100vh;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
Use this:
background-size: 100% 100%
This should stretch it to 100% of both X and Y.
Can you post a fiddle here? i need to check the html also. And...about the second part, you can easily do it with media queries.
Imagining the div with the video part has a class of 'video-section', you could do:
#media (max-width: 600px) {
.video-section {
display: none;
}
}