Could you assist me with getting something like this done with bootstrap (or any other responsive css framework): div on div example
I would like to have a container and then within a row 2 divs on top of each other, one div is background image (100% width) and another a top div with another image actually, I also want to apply animation to both divs, the background image needs to show up a little bit after the top div.
So far I was able to do something like this:
<div class="container-fluid">
<div class="row background-image">
<div class="col-md-6 col-md-offset-3 animation-1">
<img src="1.svg" style="width: 100%; height: auto;">
</div>
</div>
</div>
I've used css to add the background image like this:
.background-image {background: black url("backgroundimage.svg") no-repeat;
background-position: center;
background-size:100% }
so that would work very nicely, but I "can't" add animation to my css class .background-image? so it would display just after the top div shows up
You can do something really simple using jquery and setTimeout:
setTimeout(function(){ //show image 1
$(".background-img").animate({"opacity":"1"});
}, 1000);
setTimeout(function(){ //show image 2
$(".background-top").animate({"opacity":"1"});
}, 1500);
FIDDLE
Related
I am trying to make a custom login page in bootstrap.
On the left hand side I want my image and on the right side I want my form, I need it to be responsive so on certain screen sizes the image may well need to disappear as I don't want it to become distorted.
The problem I am having it that the image is not showing fully but is instead getting "cut off" when the form ends.
Here my html
<div class="container-fluid">
<div class="row">
<div class="col-md-6 background_image">
</div>
<div class="col-md-6">
<!-- LOGIN FORM HERE -->
</div>
</div>
</div>
I have tried this CSS but to no avail.
.background_image{
background-image: url(/static/picture.jpg);
background-size: cover;
background-position: center center;
display: flex;
}
Here is an image to try and explain better:
image
How can I get it so that the entire left hand screen is filled up with my image?
You might need to set the height of the container. Not sure if it's nested in another container but either way maybe try:
<div class="container-fluid mh-100">
if you want/need it to be full height and using Bootstrap 4, if not another approach with CSS would be:
.container-fluid {
height:100vh;
}
Or set the height of the DIV with the image to whatever you need it to be
.background_image{
...
height:200px;
}
I am trying to insert 3 different images as the background of my html page. I know how to insert one image as the background of my page, but I want to split the background into three grids.
Basically, I want to have two columns of 6 units (col-sm-6) for the background. On the first 6 units, I want to have a background image. On the right side of the 6 units, I want to further divide that into two equal sizes to fit in 2 different background images. This is what I would like to achieve:
How can I go about do this? I'd like the images to cover the whole length and width of my page.
here is the simple demo.
HTML
<div class="row">
<div class="col-sm-6 div1">
" your content goes here"
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-12 div2">
" your content goes here"
</div>
<div class="col-xs-12 div3">
" your content goes here"
</div>
</div>
</div>
</div>
CSS
.div1 { min-height:500px; background-image: url(https://images.unsplash.com/photo-1449960238630-7e720e630019?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;}
.div2 { min-height:250px; background-image: url(https://images.unsplash.com/photo-1453227588063-bb302b62f50b?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;}
.div3 { min-height:250px; background-image: url(https://images.unsplash.com/photo-1433878455169-4698e60005b1?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925); background-size:cover; background-position:center;}
There are several ways to approach what you're trying to achieve. The first thing that came to mind was to have two divs, one for the background grid and one for everything in the foreground.
The background grid would have position: fixed and use Bootstrap to layout the grid as you described.
The foreground could have position: absolute; top: 0%;. Then place all of your page content inside of the foreground div.
Check out codepen for an example of how you could set this up.
http://codepen.io/smrubin/pen/yOzWrR
Might not be the best approach, but this should at least get you started in the right direction.
I have a <div> positioning issue on single-page web design. To be more specific — I can't find a way to fill the background properly, using the <div>s.
For some reason, the <div>s won't fill the background as I want — the background always stays visible (on left/right and top/bottom sides of the <div>s).
What I'm trying to achieve:
My entire page is a single-page website. The page is composed of 5 rectangle <div>s, "touching" each other in a vertical fashion (0 pixels of background between them). I don't want the background to be visible at any part of the page.
I want the top <div> to fill the upper part of the screen ("touch" the browser's upper menu) and the right/left sides.
I want each one of the 3 middle <div>s to "touch" the left and right sides of the screen (and of course touch the two <div>s above and below, without any space between them [no background seen]).
I want the bottom <div> to fill the lower part of the screen ("touch" the browser's lower menu) and the right/left sides.
I've tried to change the position value on the CSS part. The outcome was always a "twisted" version of the page.
My HTML code:
<div id="page1" align="center">
<a id="about"></a>
</div>
<div id="page2">
<a id="portfolio"></a>
</div>
<div id="page3">
<a id="Dream"></a>
</div>
<div id="page4">
<a id="contact"></a>
</div>
<div id="page5">
<a id="Love"></a>
</div>
My CSS code:
#page1{
height : 1000px;
background-color: #4c3719;
}
#page2{
height : 1000px;
background-color: #9a8479;
}
#page3{
height : 1000px;
background-color: #ddbad8;
}
#page4{
height : 1000px;
background-color: #ddd28d;
}
#page5{
height : 1000px;
background-color: #ed9aa9;
}
Write before all CSS code this
* {
margin:0;
padding:0
}
If I correctly understand this may help
I need to create a row for a front page (like a slider) with an image where there is a man and behind him is a gradient.
the image is as it is, centered in container (width 1170px) and that works fine but i need to make a row behind the image to go full 100% for larger resolutions. I am using bootstrap 3.
The way I see it, the background 'row' div should have a dark color from left to center, and from center white color should go to the right.
I dont believe a gradient on row should work because of the resizing hm?
I cant find any similar websites that have this.
Is there a better solution?
<div class="row">
<div class="col-md-12">
<div class="container" id="slider">
</div>
</div>
</div>
#slider {
background: url('image.jpg');
height: 550px;
}
For this kind of Design normally we remove left portion if it's not necessary. Otherwise we need to make display block both div left and right.
I'm using cssgrid.net which is a 12col 1140px responsive fluid framework and I'm having trouble centering things.
My website has a "background-size: cover;" image and I have a logo that I want to center horizontally within the browser, even when it's resizing.
This is the HTML I have:
<div class="container">
<div class="row">
<div class="fourcol"></div>
<div class="fourcol">
<div class="logo"></div>
</div>
<div class="fourcol last"></div>
</div>
And the CSS:
.logo {
background: url(../images/logo_retina.png) no-repeat;
background-size: 175px 175px;
}
This is what the top portion of my site looks like:
The logo starts in the second set of 4 columns like it should, but how do I make it centered within that set of 4 columns, even when resizing?
Please keep in mind coding is just a hobby.
Assuming that each div.fourcol has the same fixed width I think that background: url(../images/logo_retina.png) no-repeat center middle; should help. If they are floating one another with width set to auto then it will be problem as div.row may be wider than the cumulative width of div.fourcol.