I am trying to accomplish this:
http://unity3d.com/community
A full width header image under the navbar: what's the best Bootstrap 3 approach to accomplish this?
I was able to move the jumbotron outside the main container using this tutorial:
http://www.tutorialspoint.com/bootstrap/bootstrap_jumbotron.htm
Now the challenge is to move the navbar back to it's original position at the top of the page (it is currently displayed just after the jumbotron)
Thanks.
Try adding up some custom CSS and HTML:
HTML:
<div class="background-image"> </div> /!-- Make sure it is right under the closing head tag! --!/
CSS:
.background-image {
height: 400px;
background-image: url('community.jpg');
width: 100%;
position: absolute;
top:0;
z-index: -100;
}
After your background div, you can put your jumbotron and customize it. Make sure your image is wide enough ( 1920px is a good width) so that it will look ok on all resolutions. Also, the height must be fixed , otherwise the image is going to take up your whole page.
Related
I'm working in a rails Instagram-like project where users can submit posts, each with a corresponding photo.
My objective now is to create a div that contains both a header (with some information) and a photograph. (
So my html.erb is something like this:
<div class="post-content">
<div class="header">
<!-- some other code here -->
</div>
<div class="photo-container">
<%= image_tag(post.image_url, class:'img-responsive') %>
</div>
</div>
The tricky bit is that:
1. I'd like to make the the "post-content" div of a particular 'fixed' size regardless of the size of image the user uploads.
2. The image to cover the whole "post-content" div without cutting out any overflow.
3. For the image to be responsive - I'm using Bootstrap.
So far my relevant scss code is like:
.post-content-panel {
width: 60%;
margin: 0 auto;
padding: 0;
// height: 300px; I'd like to fix this.
}
.photo-container img {
max-width: 100%;
height: auto;
}
This works partially. The image is responsive, covers the whole div but unfortunately the height of the parent div expands or retracts according to the image height.
I've tried to:
1. Fix the post-content-panel height but this
2. Transform the image with transform: scale(0.5) but although the size is reduced the image doesn't cover the whole container div.
3. Standardise image sizes at upload in Carrierwave (gem I'm using in the backend). I used resize_to_fill and resize_to_fit without success (either the image is cut or it gets deformed.
How could I make this work. Is it a Carrierwave issue so I images are not cut when resized or could you see any css solution here regardless the size of the image. Thanks
Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
I recently bought a parallax template, and I am trying to make a website by modifying the code to my needs. The template I use have a full screen slider at the top of the one page parallax theme, marked as id="home". For some reason, this section is set to 100% height, but I want to change this.
In the template, the original code is as follows:
#home.home-fullscreenslider {
background: url(../images/pattern.png);
position: relative;
overflow: hidden;
height: 100%;
}
And this initiates the slider:
<div id="home" class="home-fullscreenslider">
</div>
I deleted the height of the slider, so now I can fit the images to the screen properly. But the whole section is still at 100% height. I couldn't find any portion of the css code that dictates the height of #home. What do I need to do?
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.