I've been wresting with this for a couple of hours now and am not making progress. Thought I would come here for help. My task is simple and common. Using BS3, I am trying to have a full page container have a background image which will resize when you resize the browser. Seems simple enough but the few solutions I've found on here simply don't work. Here's where I'm at:
<section id="LandingRow">
<div class="LandingRowWrapper">
<div class="container-fluid">
<div class="row">
<%--Visible in small, med, large devices.--%>
<div class="col-sm-6 col-sm-offset-6 hidden-xs">
<div class="row">
...content...
</div>
<div class="row">
...content...
</div>
</div>
<%--Visible in xs devices only.--%>
<div class="col-sm-12 visible-xs">
...content...
</div>
</div>
</div>
</div>
...and my css....
.LandingRowWrapper
{
border-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-color: #bbd8e7;
background-color: #ffffff;
background-image: url('../images/slider3.jpg');
}
Much appreciated!!
If you want the background to cover both the height and width of the container, I would use background-size: cover;. If you want it to just scale horizontally and keep the height proportionate background-size: 100;% should do the trick.
Related
I want to put a .well div (or a button whatever), in the green area of this picture:
here
Here is my code for now:
<div class="container-fluid">
<div class="row row1" style="height: 400px;">
<div class="col-lg-4 col-lg-offset-1">
aaaa <!-- BUTTON OR WELL HERE -->
</div>
</div>
css:
.row1 {
background: url("appart.jpg");
background-size: 100% 400px;
background-repeat: no-repeat;
}
Problem, if I try this code:
<div class="container-fluid">
<div class="row row1" style="height: 400px;">
<div class="col-lg-4 col-lg-offset-1">
<div class="well well-sm">aaa
</div>
</div>
I obtain this result:
here
How can I put the .well div inside the green area (and have its height and width inferior than the green area ones)?
I am not exactly sure of what you are asking but... keep in mind the bootstrap col sizes. If you use lg it will get confused if the screen gets smaller than the lg size. Better then to use xs if you don't want to declare the other sizes.
Also, don't do inline css.
Is this what you are looking for?
Fiddle here
HTML:
<div class="container-fluid">
<div class="row backgroundPicHere">
<div class="col-xs-4 col-xs-offset-1 green">
<div class="well">Basic Well</div>
</div>
</div>
</div>
CSS:
.backgroundPicHere {
top: 20px;
height: 200px;
background: red;
}
.green{
background: green;
height: 200px !important;
}
.green .well{
position: relative;
top: 50%;
transform: translateY(-50%);
}
PS. Use any way you deem fitting for the vertical centering of the well. This is just one of many... some might disapprove. DS
EDIT: Correcting code indentation
Hi guys can you help me how to create a the design I made in Photoshop. I actually used col-md-6 to make it two columns. but the problem is that making on div height is bit taller than the other. Here is the image I am talking about
<div class="col-md-6" class="white">
<h1>LOGISTIC</h1>
</div>
<div class="col-md-6" class="ship">
</div>
<div class="col-md-6" class="black">
<h1>DELIVERY</h1>
</div>
<div class="col-md-6" class="pipe">
</div>
<div class="col-md-6" class="white">
<h1>STORAGE</h1>
</div>
<div class="col-md-6" class="tank">
</div>
css
.ship{
background: url(../img/resources/ship.png);
}
.tank{
background: url(../img/resources/tank.png);
}
.pipe{
background: url(../img/resources/pipe.png);
}
Please Help I am stock here, thanks in advance
Make sure that you specify the height in all your classes below:
.ship{
height: /*set the height of ship.png*/
background-image: url(../img/resources/ship.png);
}
.tank{
height: /*set the height of tank.png*/
background-image: url(../img/resources/tank.png);
}
.pipe{
height: /*set the height of pipe.png*/
background-image: url(../img/resources/pipe.png);
}
I'm not going to try to explain this in words, just have a look at this fiddle:
https://jsfiddle.net/fhf8rwno/4/
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
In either Chrome or Firefox (possibly other browsers too), watch the red column as you resize the browser width. You should notice that on every other change in browser side a one-pixel-wide gap appears at the right edge of the parent container, allowing the parent background to come through.
If I instead use col-xs-6 instead of col-xs-7 and col-xs-5, the issue disappears. So it seems the browser's pixel math may cause this due to the odd/even mix of column ratios.
This may not seem like much, but the site I'm working on uses this pattern a lot and half the users are seeing some very noticeable and unsightly dark lines.
Any thoughts or suggested hacks?
Edit: here's a hacky way of achieving this. http://jsfiddle.net/fhf8rwno/8/
CSS
.row.no-gutter {
margin-left: 0;
margin-right: 0
}
.row.no-gutter [class*='col-'],
.row.no-gutter [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="myBox" style="height:100px;background-color:#000;">
<div class="row no-gutter">
<div class="col-xs-7">
blbalbalabla
</div>
<div class="col-xs-5" style="height:100px;background-color:red; position: relative; right: -1px;">
wowowowo
</div>
</div>
</div>
</div>
</div>
</div>
A colleague and I have come to a semi-solution, but I'm not going to accept this answer just yet in case someone comes up with something less hack-y.
Shifting the last column's margins by one seems to help the issue:
.row.no-gutter [class*='col-']:last-child {
margin-right:-1px;
margin-left:1px;
}
https://jsfiddle.net/fhf8rwno/6/
I'm using Boostrap 3 and have a problem with backgrounds on elements that appear too wide. The container is in desktop mode 1170px and has 15px padding left and right which makes the content appear with 1140px width.
When I'm adding an element with a different background color (let's say body + .container both has same background), then the element will appear as 1170px wide due to the background showing in the padding area as well.
I could add CSS for each element with deviating background in each screen width (media queries) to solve the problem. But I hope there is a better way to achieve this since I can't be the only person with this problem. Does anyone know some Boostrap class / function to solve this issue, or know some best practise for this?
Try wrapping the rows and/or inner content, you can see how I have done it here; http://jsfiddle.net/w7wowg94/
HTML
<div id="master-wrap">
<div class="container">
<div class="wrap-class-one">
<div class="row">
<div class="col-md-6">Content 1</div>
<div class="col-md-6">Contnent 2</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<div class="inner-wrap">Content 1</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
</div>
</div>
</div>
CSS
#master-wrap {
margin: 0 auto;
background-color: #eee;
padding: 15px;
}
.wrap-class-one {
background-color: #ccc;
padding: 15px;
}
.inner-wrap {
padding: 15px;
background-color: #ccc;
}
I have the below HTML in this fiddle http://jsfiddle.net/v6E9a/ .The issue is that the footer is overlapping with the body.If I change the body position to relative then it all lines up correctly but I need to have absolute there to support some other functionality.
I m really not that good with CSS.Can someone please have a look at the html and tell me how i can line the head body and footer correctly.
<div id="s4-workspace" style="width: 1920px; height: 748px; overflow:scroll">
<div id="s4-bodyContainer" style="position:relative">
<div class="headerSection" style="position:relative ;border : 3px solid red">
<div class="globalHeader">
header
</div>
</div>
<div>
<div id="contentRow" style="position:relative">
<div class="fixedWidthMain" style="position:relative">
<div class="fixedWidthMain" style="position:absolute ;border:3px solid blue">
main data
</div>
</div>
</div>
</div>
</div>
<!--PAGE FOOTER SECTION-->
<div class="pageFooterSection" style="clear: both;position:relative ;border:3px solid green">
footer
</div>
</div>
Absolute take up no space, and that's why the footer is on top. There are many ways to work around this. if your main fx, have a fixed height, you can add that value as a margin-top to your footer.
fixed-main height fx 400px
pageFooterSection gets a margin-top of 400px