I am trying to make a layout where the navigation sits in a div on top of an image. Im using z-index to do this. I tried making the image a background image but I couldnt get it to scale properly when changing the size of the browser window.
The z-index seems to be working properly but now my div that would contain the nav no longer floats right.
Anyway to fix this?
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
}
#container{
width: 100%;
height: 1000px;
background-color: yellow;
position: relative;
}
#blue{
margin-top: 20%;
width: 50%;
height: 10%;
background-color: blue;
float: right;
position: absolute;
z-index: 10;
}
#test_image{
width: 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="container">
<img id="test_image" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/test_zpsfbvzo3ij.jpg">
<div id="blue"></div>
</div>
</body>
since you use position:fixed; instead of float:right; use:
right: 0;
To make your image responsive the easiest way is to set it do the desired element as a background-image using:
background: url(yourBGimage.jpg) 50% / cover;
Not sure why you use overly the fixed but here's just an example to reflect the above lines (and without the z-index stuff): jsBin demo
For the background as an image approach did you tried?
background-size: cover;
Related
I am new to HTML and Bootstrap and I am trying to learn it. I have came to a situation, where the images don't display at all.
First image should be full background for the first div and second image, smaller, should be in the top right, using bootstrap.
If someone has any idea please give a hand.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.top {
width: 100%;
height: auto;
min-height: 100%;
min-width: 1024px;
background: url('images/img1.jpg') no-repeat;
background-size: cover;
}
.top .text {
position: absolute;
width: 100%;
top: 132px;
right: 351px;
background-image: url('images/img2.jpg') no-repeat;
}
</style>
</head>
<body>
<div class=" top container-fluid">
<div class="row-fluid">
<div class="text col-lg-3 col-lg-offset-5">
<p>Hello</p>
</div>
</div>
</div>
</body>
</html>
Need to put your min-height in .top according to your mobile device or your smallest device not 100%. and .next the height:auto;. also your min-width is too much large value, so please decrease it as your device width.
In the second class you are using a background-image simply say background as in the first one.
.top .text {
position: absolute;
width: 100%;
top: 132px;
right: 351px;
background: url('images/img2.jpg') no-repeat;
border: 1px solid;
}
And you are using "position: absolute" for the second div so the first one have no content and therefore height: 100% will not do anything either put height in pixels or put some content inside the div to make it scale in height.
I have a header at the top that holds the following css rule:
position: fixed;
I also have some images that hold (and need to hold) the following css rule:
position: relative;
The problem is that my header always sits at the top of the page as the user scrolls, but when they get to the image (with position:relative) this sits on top of my header. But the header should always be on top. Is there another css rule I can apply to allow this to happen?
That problem might be with z-index. Give your header z-index:999999999 and your problem will be solved.
There is no need to set position as relative or absolute. You can use the following code:
<html>
<head>
<title>Document Edit</title>
</head>
<style type="text/css">
body {
padding: 0px;
margin: 0px;
}
.wrap {
width: 100%;
height: 1500px;
background-color: #DDD;
}
.header {
width: 100%;
height: 60px;
background-color: #004080;
position: fixed;
}
.imgdiv {
width: 400px;
height: 400px;
float: left;
background-color: green;
}
</style>
<body>
<div class="wrap">
<div class="header"></div>
<div class="imgdiv"><img src="error1.png" width="400" height="400"></div>
</div>
</body>
</html>
In your header CSS add z-index property:
with:
z-index:10 // can be any number but should be greater than the z-index of image
in image CSS add:
z-index:5; //should be less than the z-index of header
Just set in CSS z-index: 9999 to the header div.
Trying to get my image to repeat on the x-axis along the top of my webpage. The image appears but doesn't repeat.
HTML:
<div id='head'><img src='img/header.jpg'></div>
CSS:
#head img {
background-repeat: repeat-x;
width: 100px;
height: 20px;
position: absolute;
}
Thanks.
This is because you've used the <img> tags to put an image on your webpage. But what you wantto do is set the background like so:
CSS:
#head {
background-image:url('img/header.jpg');
background-repeat: repeat-x;
width: 100%;
height: 20px;
position: absolute;
}
HTML:
<div id='head'></div>
Your html is displaying an image within a div.
If you want to have your image as a background you need to set it in the css file like :
#head {
background-image:url('img/header.jpg');
background-repeat: repeat-x;
width: 100%;
height: 20px;
position: absolute;
}
and then remove the img balise from your html code :
<div id='head'> </div>
stands for non-breakable space to be sure you have a content in your balise.
FoW
EDIT: Tom was faster than me
EDIT: made css work :)
This is what your code is doing:
The img tag is inserting a single image (header.jpg) into the code.
Your css styling is telling the code to repeat any css-assigned background image along the x-axis, inside the space provided by the img tag.
All that to say: assign the style directly to the head id and add header.jpg as a background-image to the style, and it'll work fine.
Try the below as an example:
<!DOCTYPE html>
<html>
<head>
<style>
.kitty
{
background-image: url('http://images5.fanpop.com/image/photos/26000000/Nyan-Cat-Gif- nyan-cat-26044255-500-375.gif');
height:400px;
background-repeat: repeat-x;
background-color:#cccccc;
}
</style>
</head>
<body>
<h1 class="kitty">Hello World!</h1>
</body>
</html>
Here is the Fiddle.
HTML:
<div id='head'></div>
CSS:
#head {
background-repeat: repeat-x;
width: 100px;
height: 200px;
position: absolute;
background-image:url("http://t2.gstatic.com/images?q=tbn:ANd9GcRueEELruucpzBbsfBcn_JPGG338iDtWWoJPYo3o9AvbKty37edzg");
}
I hope you wanted to achieve this.
if you want to repeat your image , apply image in div's background using css
HTML :
<div class="head">
</div>
CSS:
<style>
.head{
background:url("/images/pulpit.jpg") ;
width: 100px;
height: 100px;
position:absolute;
background-repeat:repeat-x;
}
</style>
I'm an inexperienced HTML learner, so please bear with me.
I'm trying to make a <div> (#banner) stay in the center of the browser even if resized; so I figured I would need another <div> as the #container of the entire browser.
#banner needs to extend its width 100% so I had to use the absolute position.
Even though I have already looked at several other posts here in stackoverflow - I can't figure how to implement their solutions to my particular case.
HTML
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<div id="banner">
</div>
</div>
</body>
</html>
CSS
#container{
}
#banner{
background-color: #e51400;
height: 400px;
position: absolute;
left: 0px;
right: 0px;
font-weight: bold;
text-align: center;
vertical-align:middle;
}
This is basically what I'm trying to accomplish
Do I really need another <div> besides #banner in order to put it in the center ?
Well, I was able to answer my own question due to the tremendous amount of replies I got. Anyways, thanks to this page I was able to tweak the code to how I need it in this case.
Here's my final code:
CSS
#container {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
background-color:black;
}
#banner {
height: 400px;
position: absolute;
top: -200px; //needs to the negative value of half the height
left: 0px;
right: 0px;
background-color:red;
}
First of here is what I'm trying to achieve :
http://img801.imageshack.us/img801/1516/sitelayout.png
I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
<div id="contentTop"></div>
<div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>
CSS
html,body{ height: 100%; margin: 0; padding: 0; }
body{
background-image:url('images/bg.png');
background-repeat:repeat;
}
#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}
#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}
#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}
#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}
#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}
#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}
#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}
Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_<
Anyway, I would really appreciate any insights you might have.
yay Coming back to html+css after a year or two yay
for ease i'd just look in to Faux Columns
set the #content to have a background image that resembles the effect you want.
you'll also probably want to look in to a sticky footer
See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.