I'm using bootstrap and right now I have a banner image below my navbar with a title header over it. It works fine but now I'm not sure how to get content below my image. For example, the content div is overlapping the image and not going below it like a block element.
Do I need to use an img tag instead of using the css background property?
HTML
<nav class="navbar navbar-default" role="navigation">
...
</nav>
<div class="img-banner">
</div>
<div class="container">
<h1>TITLE</h1>
<div class="content">
<p>new section/block of text</p>
</div>
</div>
CSS
.img-banner {
height: 800px;
background: url('../img/background.jpg') no-repeat;
background-size: cover;
background-attachment: fixed;
position: absolute;
width: 100%;
top: 0;
z-index: -1;
}
Try position:relative instead of position:absolute for the img-banner. I think this is the fix.
Related
I have a problem adding the background-image: url() tag to my code. It doesn't display. I've tried everything, added strings, made it the first in the block but nothing works. Quite frustrating.
The HTML:
<div id="home" class="offset">
<div class="landing">
<div class="home-wrap">
<div class="home-inner"></div>
</div>
</div>
The CSS:
.home-inner {
background-image: url("imgs\04-full.jpg");
position: relative;
background-size: cover;
}
This is happening becouse the div with the background-image attribute has no sizes so it is displayed in the html page but it has width and heght null.
.home-inner {
background-image: url(https://www.gravatar.com/avatar/062021b6a1aae23a9651e9ab01ec9e36?s=48&d=identicon&r=PG&f=1);
position: relative;
background-size: cover;
width: 500px; /* fixed width */
height: 500px; /* fixed height */
}
<div id="home" class="offset">
<div class="landing">
<div class="home-wrap">
<div class="home-inner"></div>
</div>
</div>
Try adding some content to it or giving the div some width and height
Is there any way that I could position everything such that the items (such as text/pictures) can overlay?
For example:
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image</div>
<div class="class2">text</div>
<div class="class3">text</div>
</body>
I want the class 2 text and class 3 to be displayed over the image. However, in this format, they just appear below the image.
I tried putting the class 2 and class 3 inside of class 1
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image
<div class="class2">text</div>
<div class="class3">text</div>
</div>
</body>
However, I found this very troublesome. Everytime I add a new thing into class 1, the whole page will move.
Even though position: relative; and position: absolute; solves this it won't work if I try to display an element over the whole page itself (outside of class 1 - goes to the bottom of the page). I am trying to have something like this https://www.w3schools.com/howto/howto_js_alert.asp appear over my whole page.
Tried setting the with position: relative; and the alert message box as 'position: absolute;` but this didn't do anything. Could someone please give some suggestions? Thanks a lot!
I'm not sure to understand what you need but maybe your need is something like that :
.class1 {
position: relative;
background-image: url("https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg");
background-size: contain;
background-repeat: no-repeat; height: 100px;
width: 100px;
}
<body>
<header>
<div class="navbar">
</div>
</header>
<div class="class1">
<div class="class2">text2</div>
<div class="class3">text3</div>
</div>
</body>
Yeah , like this.
HTML
<div class="container">
<div class="class1">image</div> //use an img tag here
<div class="text-container">
<div class="class2">text</div>
<div class="class3">text</div>
</div>
</div>
CSS
.container {
position: relative;
text-align: center;
color: white;
}
.text-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You need to set you content at bottom of the page the try the solution, it is for bottom right poistion
.class1{
position: absolute;
right: 0;
bottom: 0;
}
<header>
<div class="navbar">
</div>
</header>
<div class="class1">image
<div class="class2">text</div>
<div class="class3">text</div>
</div>
I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.
Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>
You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.
I'm trying to build an html template from a psd design and I started mobile first doing pretty good so far with one issue.
I have this image which I positioned absolute in order to achive this effect. ( Image attached)
The thing is now that I got the image working the button for the collapse menu is not working anymore and neither the brand link. What I'm assuming is that the menu and brand are behind the image and that might cause the problem but I tried z-index to get it up front and is still the same..
I have a container for the image which has a 250px height because I wanted the image to fill this.. I got it to fill the container but it looked squeezed and I didn't know how to fix it..
HTML:
<!-- start mobile-img -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="top-img-container">
<h1 class="img-caption">Bodybuilding is good for your health</h1>
<img class="img-fluid center-block top-img hidden-sm-up" src="images/slider-01.jpg" alt="Image">
</div>
</div>
</div>
</div>
<!-- end mobile-img -->
CSS:
.top-img-container{
padding-top: 60px;
height: 250px;
min-width: 100%;
position: relative;;
}
.top-img{
position: absolute;
top:0;
left: 0;
padding-top: 60px;
min-width: 100%;
}
Since object-fit has really bad browser support, and as you have a given height, do like this, where you use a div instead.
The background-image can of course be set in the CSS as well, though sometimes the resource gets set in the markup, hence showing that as one way, often missed when replacing an img with a div.
.top-img-container{
padding-top: 60px;
height: 250px;
min-width: 100%;
position: relative;;
}
.top-img{
height: 100%;
background-size: cover;
background-position: center;
}
<!-- start mobile-img -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="top-img-container">
<h1 class="img-caption">Bodybuilding is good for your health</h1>
<div class="img-fluid center-block top-img hidden-sm-up" style="background-image: url(http://f.tqn.com/y/bodybuilding/1/W/K/7/GettyImages-73539617.jpg)"></div>
</div>
</div>
</div>
</div>
<!-- end mobile-img -->
Just add
object-fit: cover;
to the css for the image, and get rid of the
position: absolute;
top:0;
left: 0;
I am using Twitter Bootstrap and have placed a number of fullscreen background images that were working perfectly. Tonight I added Scrollr to the site and now the background images are all blown up and I can't figure out why?
html
<header id="top" class="header">
<div class="container text-vertical-center">
<div class="row">
<div class="center-block">
<div class="padded" style="border: 1px solid white">
<h1 class="title text-uppercase"><font color="#FFFFFF">Language</font></h1>
</div>
</div>
</div>
<div class="row">
<div class="scroll">
<i class="icon-double-angle-down icon-large"></i>
</div>
</div>
</div>
</header>
css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/test.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
I have also added height and width to the html and body tags at the top of my css.
html,
body
#skrollr-body {
width: 100%;
height: 100%;
}
Any ideas...?
Sorry, can't to add comment. Can you describe how it looks now? At first look it seems all is well. Maybe try ro change your position for absolute or fixed