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.
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 an banner image that is 1920 x 1300 which I want to display within a container or jumbotron which is 800px height.
How can i fit the image in so that it is also responsive and so is the text ontop of it?
<div class="container-fluid>
<div class="image-container">
<h1>Title</h1>
</div>
</div>
CSS:
.image-container{
background-image: url("..images/background.jpg");
background-size: contain;
height:800px;
width: 100%;
}
Or would it be a better idea to re-size the image?
I would suggest to use an html <img> instead of an css background.
I've made an JSFiddle of how I would do that.
Set the inner content inside the <div class="image-container"> and set it absolute.
Here is the JSFiddle.
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
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'm looking for a solution of my problem.
I am using twitter bootstrap for a mobile site and this is my outcome on mobile view:
<div class="row">
<div class="span4">
<div class="visible-phone" style="background-image: url('http://upload.tapcrowd.com/upload/catalogimages/719/catalogimagecardealer#2x.png');></div>
<p class="metadataTitle metacell">
<span style="display: inline-block" class="ellipsis">Car Dealers</span>
<span style="table-row"></span></p>
</div>
</div>
</div>
The css of the div where my image is in:
background-size:contain;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;"
But as you can see there is a margin between the image and the content below, does anyone know how I can fix this?
background-size:contain;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
"contain: This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area."
So your image has been scaled so that it fits into the element completely - you seem to want to use cover instead:
"cover: This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area."
Set margin:0; padding:0; to both the image and the content below. This will remove any margin. Since HTML adds a margin by default, you need to explicitly tell HTML to remove a margin.