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.
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 have a page with a huge background which is fixed - as in:
body {
background: url(...) no-repeat center center fixed;
}
Now, to remove some focus from the background image, I thought about simply blurring it at the moment the real content starts. Think about a transparent jumbotron, followed by one giant div containing all the content. An example markup:
<div id="navigation">
<nav>...</nav>
</div>
<div id="page">
<div class="transparent-jumbotron">
Big intro to the site goes here
</div>
<div class="content">
The actual content goes here
</div>
</div>
<div id="footer">...</div>
I have been trying out various hints and tricks on the internet - but the most I got was that #page.contents had the site's background - but upon scrolling a bit, it turned out that there was one instance of the background covering the original, and then there was the normal, unblurred background. This contents div also has a semi-transparent background applied through rgba() to darken the background.
So my question is: How can I blur the larger portion of a site, which has a fixed background image but much content that will require scrolling (as in, dynamicaly applying the blur filter)?
You should use opacity property in css
opacity : <A number between 0 and 1, e.g:0.5 1 is fully focused and 0 makes the elmend hidden >;
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
I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width
I want to do this
How to do these with CSS?
Update
How do I align the cylinders on the same bottom, and how do I add the caption below them?
You have to split the cylinder image in three parts: The top, the middle (which will be repeated), and the bottom. Like this:
Call them top.png, middle.png, and bottom.png, for example.
Then you need three HTML elements, one for each part:
<div class="cylinder top"></div>
<div class="cylinder middle" style="height:300px"></div>
<div class="cylinder bottom"></div>
And the css:
.cylinder {
width: <width of the cylinder image>px;
}
.cylinder.top {
background-image:url('top.png') no-repeat;
height: <height of the top image>px;
}
.cylinder.middle {
background-image:url('middle.png') repeat-y; /* repeat vertically */
}
.cylinder.bottom {
background-image:url('bottom.png') no-repeat;
height: <height of the bottom image>px;
}
To change the height or the cylinder, you just have to modify the style="height:300px" on the middle element.
This solution will work in any browser, even IE6.
Here is a list of tutorials for the same
You can build one using a jQuery plugin as well
or you can try Google Chart Api
http://codepen.io/msvbg/pen/Lymko
This is just for fun. In pure CSS3, no JS or images. A better approach would probably be to simply use one of the many charting libraries out there.
Create a bottom image for the rounding.
Create a 1px high image for the pipe
Create a little image for the top.
Divide your image into different divs.
<div>
<div class="bar1">
<div class="bottom"></div>
<div class="middle"></div>
<div class="top"></div>
</div>
</div>
Now you can style this with absolute positioning and repeating background images. I don't think it is very easy to do with floating and all, because you have to work from bottom to top.
Doing this with pure CSS might be overkill. Of course you can use gradients, but you can't get that shadow on the bottom of cylinders with css only. I'm not sure how to do cylinders top with css either.
The easiest way to do that is to use good old background images.
You might consider using canvas if you don't want any images at all.
UPD: If you can use CSS3, you might wanna use multiple background images. That way you'll have only one <div> instead of three of them. Good semantics.
Take a look at http://icant.co.uk/csscharts/. It's easily customizable with your own styles and has a handy PHP script for generating the tables.
Well... it can be done with some "brute force".
First of all you should cut the bases of the cilinders and put them on a background of a div with bottom alignment.
then in another div with know and fixed height add two divs of same width that float left and have on the background,repeating on Y axis a slice of a cilinder. then control their height as you need it. Below the div that contains the other two you can add the captions.
Now you will have the cilinders of the same height. In order to "shorten" one you create another div inside it that has a certain height and a white background (repeating image or color).
ex {
<div id="chart"> <!-- this one has the bottom cut backgound -->
<div style="height:200px">
<!-- cilinder class has the background -->
<div class="clinder" style="height:100%"> </div>
<div class="clinder" style="height:100%">
<!-- this one has white bg -->
<div class="shorter" style="height:30px"> </div>
<div>
</div>
<div class="labels">
<div class="caption">
Indoor
</div>
<div class="caption">
Outdoor
</div>
</div>
</div>
It should work like this.
You can make cylinders with CSS3 by giving it a box-radius.
For example:
box-radius: 100px / 30px;
This will give you a box an oval look.
Just give it the desired width and height and it's done :)
Or use jqPlot as a jquery plugin. This plugin can make lots of graphs.