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.
Related
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'm working on a responsive website and I'm having an annoying problem. In my header is some text. And I set it offscreen with text-indent -9999px. After that I load a background image. But I want only the background image to be clickable. I don't know how to do this. I've found a few examples on google. But they never "inject" a picture with css. They always define the picture in the html.
So all that I want is a picture horizontally centered in the header and only the picture is clickable, not the margin around it.
<header>
<a href="alink">
<h1>this is gonna be replaced with an image(on desktop websites). It will stay here on mobile website</h1></a>
</header>
and the css:
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('pika.png');
background-repeat: no-repeat;
background-size: contain;
background-position:50% 50%;
width:100%;
height:220px;
border:1px solid red;
float: left;
}
I've also uploaded the code to jsfiddle:
http://jsfiddle.net/Cm3yQ/
As you can see, currently the whole h1 is clickable, and I want only the picture to be clickable.
<edit>
Possibilities to have only image clikable are:
the use of img + map + area
or the use of SVG. one random tutorial : http://tutorials.jenkov.com/svg/a-element.html
Average example of what can be done : DEMO
</edit>
You should wrap link inside h1, and give it a display:block.
header {
background:url(http://lorempixel.com/400/150);
/* background could either be on h1 or a */
background-size:cover;/* optionnal */
}
header, h1 , h1 a {/* size them all at once */
display:block;
height:300px;
}
a {
text-indent:-9999px;/* hide text from screen */
/* still not working ? set background here or give it a color
almost transparent so it can catch click event :
background:rgba(0,0,0,0.001);*/
}
and HTML :
<header>
<h1>
SOME text
</h1>
</header>
it may look like a comment but i dont have enough reputations to put comment ,hence am putting it as an answer.
Why dont you create another div in the html and put your image inside it ,then style it accordingly.
HTML
<header>
<div class="headerDiv">
<h1>this is gonna be replaced with an image(on desktop website). It will stay here on mobile website</h1>
</div>
</header>
Css
.headerDiv{
border:1px solid red;
height:220px;
width:100%;
}
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('http://img3.wikia.nocookie.net/__cb20120630141813/sims/images/d/d7/Pichu.gif');
background-repeat: no-repeat;
background-size: contain;
background-position:center;
height:220px;
// float: left; Get Rid of float: left
}
Some pages contain page-header element/class.
.page-header class look like this:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
}
For Example:
index.html
<div class="page-header">
<h1>Homepage</h1>
</div>
about.html
<div class="page-header">
<h1>About</h1>
</div>
I want to add small image on top of the page-header using css, each page will have different image. How to do this and should I use span with css ?
With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds
Yes you can add a SPAN and give the image,
NOTE: if you give any image to the header as a background, it will not useful to SEO, I suggest same image keep in IMG tag and out of the screen to get some SEO help too.
Ex:
.page-header {
background: url(/public/images/page-header.png) no-repeat;
width: 1000px;
height: 190px;
color: white;
font-size: 17px;
margin: 0;
position:relative;
}
.out-of-screen {
position:absolute;
top:-2000em;
}
<div class="page-header">
<h1>Homepage</h1>
<img src="/public/images/page-header.png" alt="alt text" class="out-of-screen">
</div>
If your looking for a secondary background image to be overlaid on the previous background image. Then try this. I haven't tried it myself but it may be the answer.
.page-header:after{
background-image:url('/public/images/page-header2.png' no repeat;
}
You may need to position the :after to where you want it on the page but it maybe easier to stick with the simple image tag as Sameera has suggested if you want the image to be in a certain location within the element.
position:fixed;
left:0;
top:30%;
width:200px;
height:auto
<div class="page-header">
<h1>Homepage</h1>
<img src="path/to/image.jpg" alt="" style="position:absolute; left:50px; top: 50px;" />
</div>
there is a css property calles z-index.
The higher the value the most 'front' it will be.
The lower the more Back t will be
Négative value are okay.
.front{
z-index: 999;
}
.back{
z-index: 0;
}
NOTE: different-browser seems to have different behaviour.
To answer your question, Give a z-index lower to your header and add an elemt (span would be good) with an higher z-index
Use Multiple Backgrounds with CSS3.
Add padding-top to .page-header position page-header.png to bottom and
place second background at top.
http://css-tricks.com/stacking-order-of-multiple-backgrounds/
http://www.css3.info/preview/multiple-backgrounds/
CSS allows us to add multiple backgrounds images just by adding a comma (,) between them.
HTML
<div class="bg-image">
CSS
.bg-image{
outline: 2px solid black;
padding:20em;
background-image:
url(https://images.unsplash.com/photo-1634148739677-a5bb54df2611?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=774&q=80),
url(add another ".svg img" or any type of image);
background-repeat: no-repeat, repeat;
background-position:right 20% center 0px, top left;
background-size:auto, 10px;}
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.