I've been struggling with this issue for a while although tried from many topics in StackOverflow, and just wondered if anyone has any advice!
I'm using Bootstrap 3, basically I want to place images inside the container <div>, that will resize with the browser window, the content still staying inside it. So how can I make it responsive? Thank you in advance!
Demo
HTML
<div id="special-dishes-section">
<div class="container">
<div class="special-dishes">
</div> <!-- end special-dishes -->
</div> <!-- end container -->
</div> <!-- end special-dishes-section -->
CSS
#special-dishes-section{
background: url('../images/special-dishes-bg.jpg') no-repeat center center;
min-height: 560px;
padding: 71px 0 65px 0;
position: relative;
}
.special-dishes{
background: url('../images/wooden-bg.png') no-repeat center center;
min-height: 424px;
}
box-sizing: border-box;
This property help you when it needs to be responsive.
See this link for more information:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Hope it helps you.
Try background-size: cover; or background-size: contain;.
Related
New at Bootstrap. I'm having a problem setting my background image to follow the header image.
The header section has it's own full-screen background, which I then want to be followed by a tiled background image.
I tried:
<div class="header">...</div>
<div class="main-body">
<div class="container">...</div>
<div class="container">...</div>
...
</div>
<div class="footer">...</div>
with the following stylesheet:
.main-body {
text-align: center;
background: url(../img/setttings-bg-black.jpg) no-repeat center center;
background-size: 1024;
background-color: #000000;
}
.header {
text-align: center;
color: #000000;
background: url(../img/promo-bg.jpg) no-repeat center center;
background-size: cover;
}
The problem is that the main-body background's top is hidden by the bottom part of the header body.
What am I doing wrong?
Verify this link or link
have a solution for you.
problem 1)
What I did is I added a <img> below the first div (so the div with the class intro). The img has a clas of bg.
Than add this css:
.bg{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
here you have a working fiddle. I added a lot of <br> tags to show you it works.
You can also try to set the background image height:100% and width:auto;. If you do this the image won't be so crammed together on some screens.
problem 2)
I Gave every slide a class slide1. I also added to all the slide classes position:relative;. Taka a look at this fiddle.
i hope your question is now anwsered. If you have other problems, feel free to ask.
I am using bootstrap frame work and using the jumbotron feature to create my header. I have a fixed navigation and want the jumbotron to be the full height and width of screen when scaled. I have content underneath the jumbotron that I want scrollable like regular. Just when someone gets to site its fullscreen jumbotron
html
<div class="jumbotron row">
<header>
<div class='navbar ........
... paragraph content ...
</div>
css
.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
height:100%;
}
purii's answer is perfectly acceptable, however I'd opt for a slightly different approach when targeting the jumbotron BootStrap class:
HTML:
<div class="fullheight jumbotron row">
<header>
<div class='navbar ........
... paragraph content ...
</div>
CSS:
.fullheight.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
min-height:100vh;
}
As you can see I placed a new fullheight class (can be any class name of course) within the "jumobtron" <div>. I then used that class name along with the jumbotron class as the selector for CSS styling.
The benefits of doing it this way is that it ensures that if you chose to use <div class="jumobtron"> on another page in the future, you can still use BootStrap's default styling for this class.
There are multiple ways to solve your problem. The most straight forward would be the usage of viewport units to scale your height. They are supported at least by IE >= 9.
.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
min-height:100vh;
}
I want to add a parallax scrolling effect to the .intro-body of my home-page in the same way that I have added this effect to the jumbotron images I have on my 'About', 'Resume' and 'Portfolio' pages. For some reason however the background image doesn't show when I apply it to the .bg class. The images show correctly on the other pages; the only difference is that I'm using #intro before .bg which I have done so that I can style this image to fit the entire height and width of the screen.
The background: CSS property is showing an image in the below fiddle, but I can't get it to work on my own website:
https://jsfiddle.net/c3do6hj0/
Is there something I'm doing wrong here? I've spent about 3 hours researching on SO but to no avail, so any ideas are much appreciated, thanks
My homepage
HTML
<header class="intro" id="intro">
<div class="bg"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Jon Howlett</h1>
<p class="intro-text">Aspiring web designer<br/>&<br/>front-end developer</p>
<a href="#summary" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animate"> </i><span class="zero">Button Down</span>
</a>
</div>
</div>
</div>
</div>
</header>
CSS
#intro .bg {
background: url("https://upload.wikimedia.org/wikipedia/common/5/57/LA_Skyline_Mountains2.jpg") no-repeat scroll center bottom / cover;
background-size: cover!important;
position: fixed;
width: 100%;
height: 1000px;
top:0;
left:0;
z-index: -1;
}
.intro-body {
width: 100%;
height: auto;
padding: 100px 0px;
text-align: center;
color: #FFF;
background: transparent;
}
You have an inline style on the .bg div: height:0px;.
If i add the background: #000 url("images/intropage_mountains.jpg") no-repeat scroll center bottom / cover; to the .bg div then disable the inline style the background image shows up.
It appears that something in one of your javascript files is applying this inline-style.
When i change the class to something else such as bg_main the inline-style goes away and the background image works.
EDIT*: As a side note. I noticed that you have 2 different versions of jquery resourced.
http://code.jquery.com/jquery-2.1.4.min.js
and
http://www.jonhowlett.uk/js/jquery.js
I would advise you to only keep the latest version. having more than one jquery resource can sometimes cause conflicts with your code.
I am new to Bootstrap, responsive web design, and am trying to create a page for my band but I am running into a few issues. I will try to explain as best as I can my situation and I greatly appreciate any and all help...
I have a div that has a background image of the band and I need it centered in the screen (regardless of the size of the screen) inside of one of Bootstrap's container DIV's. On top of that image, I have another image that I want to include. I am able to get that result so far. The problem I am running into is when I try to position the child DIV inside of the parent DIV. I have tried to set the parent DIV with a position: relative and the child DIV with a position: absolute, but as I begin to resize the screen, the inside image suddenly enlargens and stretches outside of the parent DIV. Also, when using this method and trying to position the child DIV 75% from the top of the parent DIV by using top: 75%;, it makes the image jump out of the parent again and puts it down at the bottom of the screen.
Here is the code that I have used so far but cannot get to work. Again, any help at all would be greatly appreciated as I am new to Bootstrap and responsive design but I would love to figure this stuff out. Thanks in advance!
MY HTML:
<div class="container">
<div class="row">
<div class="col-md-12 bandphoto">
<div class="row">
<div class="col-md-6 col-md-offset-3 theband-title">
<img src="images/theband.png" class="img-responsive ">
</div>
</div>
</div>
</div>
MY CSS:
.bandphoto {
position: relative;
max-width: 2000px;
min-height: 999px;
background: url(images/bandphoto.png);
background-size: 100%;
background-repeat: no-repeat;
}
.theband-title {
position: absolute;
top: 75%;
}
http://jsfiddle.net/isherwood/w3mgQ
Am I doing something wrong here? If so, please advise with and feel free to educate me as well so that I can better understand this stuff.
I think you want to avoid using absolute positioning (because it's very difficult to keep centered), and don't try to force Bootstrap elements when they're not needed. It's not clear to me how you want to position the inner image because I have no size reference, but maybe this gets you closer:
http://jsfiddle.net/isherwood/w3mgQ/3/
.bandphoto {
position: relative;
max-width: 2000px;
min-height: 999px;
background: url(http://placehold.it/600x600/333333);
background-size: 100%;
background-repeat: no-repeat;
}
.theband-title {
margin: 0 auto 0;
}
<div class="container">
<div class="row">
<div class="col-md-12 bandphoto">
<img src="http://placehold.it/500x500" class="theband-title img-responsive" />
</div>
</div>
</div>
I believe what you're looking for is display:table and his friends. Here's a JSFiddle demonstrating:
http://jsfiddle.net/VcFf9/4/
I've set the container to be 100% height, and then vertically aligned the background and the content of the cell. Bootstrap's grid lends itself quite well to display:table, so try it out! :D
as an excercise i decided to delve in to css layout styling and am already failing to see why my layout is not aligning correctly. also why is the container div only appearing when there some text in there. i thought it would display and grow based on the background property in css statement. i have done screengrab to show problem. can someone show my error. thanks
screen grab: http://imageshack.us/photo/my-images/21/containergrabnew.png/
css
#container {
width: 800px;
margin: 0 auto;
background-image: url(../images/container-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerLeft {
width: 475px;
float:left;
background-image: url(../images/container-left-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerRight {
width: 300px;
float:right;
background-image: url(../images/container-right-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
html
<div id="container">
This is the container
<div id="containerLeft">
This is the left container
<div id="containerRight">
This is the right container
</div></div>
</div>
am already failing to see why my
layout is not aligning correctly
Your HTML is not nested correctly. Change it to this:
<div id="container">
<div id="containerLeft">
This is the left container
</div>
<div id="containerRight">
This is the right container
</div>
</div>
also why is the container div only
appearing when there some text in
there. i thought it would display and
grow based on the background property
in css statement.
You need to clear your floated elements.
You can do this by adding overflow: hidden to #container.
You should read this article for more information: http://css-tricks.com/all-about-floats/
It discusses why this happens, various ways to fix it, and includes useful and relevant information about floats in general.