I'm trying to make the image have the same width as the browser screen. It needs to be responsive. I'm new at bootstrap 3 so any help is greatly appreciated.
Here is a code playground like for you to see exactly what I mean.
http://bootply.com/98241
You will see the jumbotron image is left aligned. I need it to stretch the full width of the page.
According to the Bootstrap documentation, to make .jumbotron full width, take it outside of any .container.
http://getbootstrap.com/components/#jumbotron
Make the img width 100%..
.widewrapper {
width:100%;
}
.widewrapper > img {
width:100%;
}
Bootply
I was having the same issue. I took mine outside of the container in html and used the following code in my CSS:
jumbotron {
position: relative;
background: url("img.url") no-repeat center center;
width:100%;
height: 100%;
background-size: 100% 100%;
}
Related
Check out my fiddle:
http://jsfiddle.net/uvk80oob/
.content {
width: 70%;
height: 100%;
float: left;
bgcolor: #f8f4eb;
}
.sidebar{
width: 200px;
height: 100%;
float: left;
background: url(http://i.imgur.com/S0I0UaN.png) repeat left top;
}
I am trying to make a simple layout for my personal use, and learning purposes. Having tried this for over three hours now, this is the closest I can get. I need the sidebar background image to be of 100% height. Also, I need the content width to be 100%.
Basically, the content div needs to be 100% at all times, and the sidebar background image could be fixed for all that matter. But it needs to be of 100% height.
Anyone who could point me in the right direction? Thanks very much in advance!
Check this approach:
http://jsfiddle.net/uvk80oob/4/
...you can wrap the sidebar and content in a wrapper element and use:
.wrap {
display:table;
height:100%;
}
.wrap > div {
display:table-cell;
height:100%;
}
I am adding a few images to a portfolio website but want to use background-image in oppose to the img property. The website is very responsive and uses percents for it's basic structure. I am using the background-img property and setting the width of the container to 100% of its parent. Adding a set height makes the image visible however adding height:100% or height:auto makes the image disappear, I'm sure this is probably a pretty simple piece of code to figure out but I can't seem to find a solution. Below is the code I am using to implement the image
.image-left {
float:left;
width:100%; height:100%;
background-image:url(/img/image.jpg);
background-position: center top;
background-size: 100% 100%;
}
And here is a http://jsfiddle.net/WD4HM/3/ to better explain my problem.
Any help would be appreciated, thanks guys.
height: 100% does not work unless the parent element has an explicit height. The reason the image is disappearing when you use this rule is because the element actually has no height.
However, you can use javascript to capture the window height, and then match the element you want to be 100% of the window height.
new answer:
#wrap {
width:50%;
margin:0 auto;
overflow:hidden;
background:blue;
}
.img-left {
float:left;
width:100%;
height: 100%;
background-image:url(tiger.jpg);
background-position: center top;
background-size: 100% 100%;
margin-bottom:45px;
}
I'm in the midst of making a navigation bar. I came here earlier and got some help re-organising and coding said item. All seemed great and it seemed like it should work but when using the following code instead of each image resizing, it only showed X% of the images height and Y% of the images width. I cannot figure out what is going wrong.
CSS:
#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }
#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }
Please refer to how it looks looks on my website to see what I mean.
Please also refer to my other navbar question.
Thank you.
Background images don't resize. They are shown in full size and are clipped if the container is smaller.
What you can do:
The best approach is to resize the images to the target size
A hackish approach is to use absolutely positioned <img> tags as background and <span> text as foreground.
<div class="hasBg">
<img>
<span>text</span>
<div>
.hasBg{
position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
position:absolute;
top: 0;
bottom: 0;
left: 0;
}
.hasBg span{
position:absolute;
}
A native but new feature is to use the new CSS3 background-size. but this is not cross-browser afaik
Since you've done it as a background image, the width and height attributes only apply to the div, not the image.
You have two options.
Resize your images to fit the dimensions
have your images on your page and use javascript for your hover effect
Sorry but I can't get this to work. Should be a quick answer.
My html is laid out like so:
<html>
<header>
...
</header>
<body>
<div class = "background"></div>
<div class = "content">
...
</div>
<body>
</html>
The I want the background div to simply place a 1000px background colour down the entire length of the page. The content is then padded 40px on each side, inside this background colour.
The css is like so:
body {
width:1000px;
margin-left:auto;
margin-right:auto;
}
.background {
position:absolute;
top:0px;
width:1000px;
height:100%;
}
.content {
min-height:100%;
padding-left:40px;
padding-right:40px;
}
I thought it worked like so... The body div would expand to hold the min-height of the .content div. This means that 100% height of the .background div would fill the entire body and so the length of the page. However it does not. It only fills the window height. Where am I going wrong?
Thanks
As topek guessed, this will do it:
html, body{
height:100%
}
The reason this works is because percentage CSS heights only work if the parent element has a height defined on it. By adding the above, you're giving .background's parents a height.
Update: based on OP's comment, here's how you would get the .background div to always appear to fill the viewport:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
/* Fixed element that takes up entire viewport */
.background {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Content that stacks above .background */
.content {
position: relative;
z-index: 2;
}
As .content grows larger than the viewport and the user scrolls, the fixed position of .background will keep it always in view.
And of course, a handy example.
All you need is:
body, html {
height:100%
}
Then specify height:100%; any DIV you want to have full height.
BTW - 1000px wide is a bad unit to use. People with 1024 wide screens will get horizontal scrollbars. Better to stick to 980 or less. 960 is good because it can be divided by many factors.
I think this is what you're looking for.
http://jsfiddle.net/sg3s/GxRcp/
The key in this little example is the position: fixed; for .background so that it is kept in the screen while scrolling.
If you don't really want to do this and want the background to expand ARROUND the content just make it a normal / relatively positioned element, and wrap it arround .content...
If you give a more acurate description of the layout you're trying to create (and maybe why in such a way) we may be able to help you better.
Btw, in your example html there is an error, header should be head.
You should put bg into html or body elements as the first choices.
html { background: url("bg.jpg") no-repeat top center; }
or
body { background: url("bg.jpg") no-repeat top center; }
Fixed:
background: url("bg.jpg") no-repeat top center fixed; /* And bg will stay in fixed position */
http://69.143.137.155/csa-consulting/index.php
I am trying to extend the grey menu bar and the blue background to fill the window (whatever the size) yet keep the content centered at a fixed size. Been working on getting this for a while and cannot seem to figure it out.
Thanks!
Use a background image on the <body>.
.body {
background:#F2F4EE url(menu-bar.jpg) TOP CENTER REPEAT-X;
}
Try adding the width style to your nav class. Like so
.nav
{
width: 100%;
}
Remove the following declarations from #container:
margin-left: auto;
margin-right: auto;
width: 1024px;
Add the following declaration to body:
margin: 0;