I am using bootstrap to create a simple webpage, here I have the photo of the webpage when it's full desktop width
http://imgur.com/a/QcC18
As I like it, it covers the entire page.
But when I resize Chrome to a smaller width, theres some white space at bottom, and I dont know why?
http://imgur.com/a/TuXdH
Whats even worse is that I do developer tools, and see that html only covers my div, so why is there extra space ?
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
box-sizing: border-box;
}
/* SECTIONS */
section {
padding-top: 2%;
padding-bottom: 2%;
}
.main {
position: relative;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
/* bottom, image */
url(img/background.jpg);
background-size: cover;
padding-bottom: 56.25%;
background-attachment: fixed;
}
.no-padding {
padding: 0;
}
/* HEADINGS */
.welcome-area {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
}
.welcome-area h1 {
font-size: 500%;
}
<section class="main">
<div class="welcome-area">
<h1>Hello.</h1>
<div class="row text-center btn-main">
<button type="button" class="btn btn-primary btn-explore">EXPLORE</button>
</div>
<div class="row">
<img src="css/img/face.jpg" alt="face" class="img-responsive img-face">
</div>
</div>
</section>
Please add height: 100% to your css code for html, body and then add height: 100%; box-sizing: border-box; for element section.
Edit: and for the better effect you can remove padding-bottom for .main element.
try adding this to your css:
html, body{
width:100%;
height:100%
}
this stretches the page to fill the whole page in width and heigh
Related
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>
Hi guys i am trying to create this effect with bootstrap 3 :
The black color being a random image and then just a white strip on were I can put my text etc.
So far I have this :
HTML:
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
CSS
.parallax {
background-image: url("../img/c.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 800px;
}
However no matter what I change the width to for the container , it does not become smaller just the text inside of it does.
So again I am just looking to have a background image cover the whole browser and then just a white strip coming down but the width to be around 800px; so it leaves gaps on the side to see the image in the background
You can make use of min-width and max-width on container class. This ensures that when your browser is resized the sides are still visible by setting the width of the container to a relative (%) value. And the max-width limits it from extending beyond that. You can position the container using transform property in CSS and make an animation for the container to come from top and set its position to the vertical center of the webpage.
As far as the background is concerned, you can set the width or height to 100vw, 100vh or even % as you find suitable. This is just a demonstration.
.parallax {
background-image: url("http://via.placeholder.com/300x100");
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -300px;
background: white;
color: black;
min-width: 70%;
max-width: 800px;
height: 100px;
text-align: center;
animation: expand 2s linear forwards;
}
#keyframes expand {
0% {}
100% {
top: 50%;
transform: translate(-50%, -50%);
}
}
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
html
<div class="parallax">
<div class="cont">
hellowold
</div>
</div>
css
.parallax {
width: 100%;
height: 500px;
position: relative; // this is necessary
background: #000;
}
.cont {
position: absolute;
width: 100%; // for responsive it will take 100% width
max-width: 800px; // for bigger screen it will be max 800px
padding: 15px; // just for decoration
background: #fff;
box-sizing: border-box;
margin: 0 auto; // absoluted element center purpose
bottom: 0; // positioning at the bottom as per your image
left: 0; // absoluted element center purpose
right: 0;// absoluted element center purpose
text-align: center; // just for decoration
}
here's the site. If you resize the window to a smaller size. You'll notice there's a bottom margin/padding caused by
.carousel-inner {
background-color: #03324c;
}
I could remove that but the indicators won't be visible and there will be an empty gap at the bottom . I know that that the images have different size, I tried resizing, same issue. I have tried many things for 2 days, nothing worked.
.carousel-inner {
background-color: #03324c;
}
.carousel-inner img {
margin-left: auto;
margin-right: auto;
margin-top: auto;
opacity: 0.7;
width: 100vw;
height: auto;
max-height: 100vh;
bottom: 0;
}
.carousel-caption h3 {
color: #fff !important;
}
You'd be better off using a background-image combined with background-size:cover on the .item elements.
For example, your first item would change to this (just remove the img tag):
<div class="item" style="min-height: 710px;">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
And the styling for the corresponding .item element would be this:
.item {
background-image: url(images/medium/quote.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#feihcism, I immediately agree with your comment, then I had to make the image 100% whatever its parent is and believe me. it works
.carousel-item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
min-height: 100%; // I mean this!
}
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'm having problem where, for example, I have a title placed on the page in a certain place using i.e. top: 150px;
However, once I start reducing my window size it cuts off my background. I realized that using tags like top/bottom/left/right or margin-top causes this to happen since it wants to stay at that certain place and doesn't reduce the size along with the window.
I've tried using background-size: cover; in my body and various positions in my #title but still couldn't fix this problem.
CSS
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#gradient {
background: #00BFFF;
background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
background: linear-gradient(to right bottom, #086A87, #00BFFF);
border-radius: 2px;
/* background-size:cover;*/
background-size:100% 100%;
background-repeat: no-repeat;
}
#title {
font-size: 60px;
color: #FF8000;
/* margin-top: 150px;*/
/* position: fixed;*/
/* position: relative;*/
top: 150px;
}
HTML
<html>
<body id="gradient">
<!-- Title -->
<div class="row ">
<div id="title" class="small-16 large-12 large-centered text-center columns">Example</div>
</div>
</body>
</html>
What's the best way to position grid elements that eliminates these kind of problems?
I'm having a hard time positioning elements on the page using the grid system.
Thanks!
EDIT: Updated HTML
EDIT 2: If you resize the height to really small you can see my problem. http://codepen.io/anon/pen/RNXrMM
The core issue here is that you shouldn't be positioning or styling grid elements (with the possible exception of background). Place your title element inside the grid, where content belongs, and style it accordingly.
<div class="gradient">
<div class="row header">
<div class="small-16 large-12 large-centered text-center columns">
<div id="title">Example</div>
</div>
</div>
</div>
Demo
Note that I've moved the background to a div element rather than the body, and I've used a class, which is preferable for CSS because it makes it more reusable and robust.
On the matter of the gradient 'disappearing' on resize, if you change
html {
width: 100%;
height: 100%;
to
html {
width: 100%;
min-height: 100%;
it should resolve that. Also allows you to use
#title {margin-top: 150px;
without any cutoff - though, if you want your design to be responsive (and it sounds a little like you do) - I'd recommend using ems or % for your margins to making it a little more consistent.
you can see the fiddle here
Try adding min-width:1000px
You can set pixels according to your need
The CSS code for this :-
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
min-width: 1000px;
}
#gradient {
background: #00BFFF;
background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
background: linear-gradient(to right bottom, #086A87, #00BFFF);
border-radius: 2px;
/* background-size:cover;*/
background-size:100% 100%;
background-repeat: no-repeat;
}
#title {
font-size: 60px;
color: #FF8000;
/* margin-top: 150px;*/
/* position: fixed;*/
/* position: relative;*/
top: 150px;
}