So whenever I create something, another item is moving. This time I wanted to have text in the center-left, but when I would do it the buttons would go on the same level.
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto:400,100);
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Francois+One);
#font-face {
font-family: Myraid;
src: url(MYRIADPRO-SEMIBOLD.woff);
}
*{margin:0;padding:0;}
body {
background: url('file:///C:/xampp/htdocs/css_page/css/HQ_IMAGE.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 25px;
font-family:'Open Sans',sans-serif;
}
.login_button{
background: #dfdfdf;
border: 0;
padding: 10px 30px 10px 30px;
border-radius: 3px;
font-size: 15px;
font-family:'Open Sans',sans-serif;
margin-top: 18px;
margin-left: 1100px;
-webkit-transition:background .3s;
}
.login_button:hover{
background: #fff;
}
.Head_text{
margin: 150px 15px 150px 15px;
}
.login{
position: relative;
float: right;
margin-left: 1080px;
border: 1px solid rgba(255, 255, 255, 0.5);
background: none;
border-radius: 2px;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
font-size: 17px;
cursor: pointer;
-webkit-transition:background .3s;
font-family: Arial;
font-weight: bold;
color: #fff;
position: fixed;
}
.login:hover{
opacity: 0.5;
background: #000000;
border: 1px solid #000000;
border-radius: 2px;
}
.signup{
float: right;
border: 0;
background: #F77462;
margin-left: 1200px;
border-radius: 2px;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
font-size: 17px;
cursor: pointer;
-webkit-transition:background .3s;
font-family: Arial;
font-weight: bold;
color: #fff;
position: fixed;
}
.signup:hover{
background: #f6614d;
border-radius: 2px;
}
input[type="text"],input[type="password"]{
width:300px;
background: transparent;
border:1px solid #ccc;
padding:1%;
font-size: 17px;
font-family:'Open Sans',sans-serif;
color:#fff;
border-radius: 3px;
margin-left: 1000px;
}
input[type="text"]:focus,input[type="password"]:focus{
background: rgba(149, 147, 150, 0.2);
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="C:\xampp\htdocs\css_page\css\styles.css" rel="stylesheet">
</head>
<header>
<div id="login">
<form>
<input type="button" class="login" value="Login">
<input type="button" class="signup" value="Signup">
</form>
</div>
</header>
<body>
<p class="Head_text">Where You</p>
</body>
</html>
I also tried with but, the same results. If you could please tell me the error I would very appreciate it.
Instead of trying to position everything with large margins, try putting those elements into a container with 100% width and floating them.
You had your .login input styled with both position fixed and relative as well as margin-left: 1200px and 1000px.
I'm guessing .login should have been #login, as .login is the input which you are already styling with [type=text].
I made a codepen of your code
Related
I have created a series of image links for gallery categories. Each "button" has an image in the background and the gallery title overlaying this. I've set it to change out the background and the the title also changes to the gallery on hover using css, but the issue I'm running into is with the heights. The divs are loading to fit the titles, but then jump larger on mouseover to accommodate the description text. I need it to load large enough for the description text to fit nicely inside.
I want this to be responsive, so the text needs to be able to wrap, and the divs need to expand accordingly (and not jump heights on mouseover ever). So the height cannot be fixed heights or these will be way too tall when the divs are full width. I've got a single test one set up here
body{
font-family: Arial, Helvetica, sans-serif;
}
.item1{
width: auto;
display: table-cell;
}
a{
text-decoration:none;
}
.label1 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: 100% auto;
transition: background 0.5s ease;
}
.label1.success {
background-color: #FFFFFF;
}
.label1:hover {
width: auto;
height: auto;
padding-left: 20px;
padding-right: 20px;
background: #FFFFFF ;
background-position: center top;
background-size: 100% auto;
-webkit-box-shadow:inset 0px 0px 0px 4px #000000;
-moz-box-shadow:inset 0px 0px 0px 4px #000000;
box-shadow:inset 0px 0px 0px 4px #000000;
}
.item1 a p.new-label1 span{
position: relative;
content: 'NEW'
}
.item1:hover a p.new-label1 span{
display: none;
}
.item1:hover a p.new-label1:after{
content:attr(data-title);
white-space: normal !important;
overflow-wrap: normal;
font-size: 14px;
color: #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix">
</div>
I'm also having an issue with transition effects between, but this issue is far more pressing. That said, if anyone wants to throw me a solution to that, I wouldn't mind at all ;)
I don't know this is exactly you want , but i made demo with my understanding .It might might help
body {
font-family: Arial, Helvetica, sans-serif;
}
.item1 {
width: auto;
display: table-cell;
}
a {
text-decoration: none;
}
.label1 {
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: cover;
transition: all .4s;
margin: 0;
}
.label1.success {
background-color: #fff;
}
.item1:hover .label1 {
}
.item1 a p.new-label1 span {
content: 'NEW';
position: absolute;
right: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 1;
visibility: visible;
transition: all .4s;
}
.item1:hover a p.new-label1 span {
opacity: 0;
visibility: hidden;
}
.item1 a p.new-label1:after {
content: attr(data-title);
background-color: transparent;
white-space: normal;
overflow-wrap: normal;
font-size: 14px;
color: #000;
padding: 20px 10px;
opacity: 0;
visibility: hidden;
display: block;
transition: all .4s;
}
.item1:hover a p.new-label1:after {
content: attr(data-title);
background-color: #fff;
opacity: 1;
visibility: visible;
-webkit-box-shadow: inset 0px 0px 0px 4px #000000;
-moz-box-shadow: inset 0px 0px 0px 4px #000000;
box-shadow: inset 0px 0px 0px 4px #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix"></div>
I have a header that needs to have a greeting div inside of it. And that div has to be styled with :before and :after. I cannot add it via HTML. But when you resize the window, everything gets messed up. And I have no idea how to stop it from happening, without changing the font-size.
Can someone please take a look and tell me if there's something I can do? Thank you!
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
}
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
you may try this code, removed the absolute position :
.header {
background-image: url('http://lorempixel.com/1300/800/');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
min-height: 765px;
text-align:center;
}
.title {
position: relative;
display:inline-block;
margin-top:15%;
padding: 0px 20px 7px 20px;
border: 1px solid #fff;
outline: 2px solid #000;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
font-size: 3em;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.title:before {
font-family: FontAwesome;
content: "\f051";
font-size: 1.5em;
vertical-align: bottom;
}
.title:after {
content: "Hello hello";
position: absolute;
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
display: block;
top: 15px;
left: 75px;
line-height: 1;
}
<div class="header">
<div class="title">
Hello
</div>
</div>
Recently I asked about a comparable case over here.
I tried to center the items (in this case) by the solution given in the question above but with no end. I have been wrapping these columns in an apart row col 'div' but (this time) it makes no sense. The dotted line in the background is the real center and all items displayed (envelope-image, CONTACT, get in contact-box and even the contact form and SEND-button) are not exactly in the center of the webpage. Who can help me out of this asymmetry?
Codepen
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div class="supporting">
<div class="container" style="min-height:300px;">
<div class="col">
<h1>😀</h1>
<a>Learn more</a>
</div>
<div class="col">
<img src="http://rexkirby.com/kirbyandson/images/email.svg">
<h2>Contact</h2>
<p></p>
<b>Get in contact</b>
</div>
<div class="col">
<img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
<h2>Support</h2>
<p></p>
<div class="interests text-center">
<a class="learn-more">Learn more</a>
</div>
<div class="int text-center" style="display:none">
<c>Lorem ipsum.</c>
</div>
</div>
</div>
</div>
</div>
<div class="contactform">
<div class="container">
<div class="row col-md-12">
<div class="col-md-12 text-center">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="row col text-center">
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
CSS:
body:after {
content: "";
position: absolute;
z-index: -1;
top: 10%;
bottom: 0%;
left: 50%;
border-left: 2px dotted rgb(51,51,51);
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 64px;
padding: 0px 0px;
}
.supporting img {
height: 40px;
}
.supporting .col h1 {
font-size: 35px;
padding-bottom: 48px;
margin-top: 49px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
padding: 0 50px;
margin-bottom: 60px;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
}
.supporting a {
font-size: 10px;
color: rgb(51,51,51);
font-weight: 600;
border: 1px solid rgb(51,51,51);
padding: 15px 50px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
}
.supporting b {
font-size: 10px;
color: rgb(51,51,51);
font-weight: 600;
border: 1px solid rgb(51,51,51);
padding: 15px 39px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.1px;
position: relative;
}
.supporting .int c {
font-size: 15px;
color: rgb(51,51,51);
height: -10px;
padding: 0px 50px;
}
.clearfix {
clear: both;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 30px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Open Sans', sans-serif;
text-transform: normal;
font-size: 11px;
left: -185px;
}
#feedback-page{
text-align:center;
}
#form-main{
width:100%;
float:middle;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: middle;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.feedback-input {
color:#3c3c3c;
font-family: 'Open Sans', sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: rgb(245,245,245);
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid rgb(42,186,214);
color: rgb(51,51,51);
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Open Sans', sans-serif;
float:middle;
width: 50%;
border: rgb(51,51,51) solid 1px;
cursor:pointer;
background-color: rgb(255,255,255);
color: rgb(51,51,51);
font-size: 16px;
padding-top:12px;
padding-bottom:12px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:600;
letter-spacing: 1.1px;
}
#button-blue:hover{
color: rgb(51,51,51);
}
.submit:hover {
rgb(51,51,51);
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
#form-div{
left: 30%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
You have set the width of your ".suporting .col" divs to 33%, which is not quite one-third of the page. If you choose to be more precise (e.g. 33.33%) you will see that your text is more nearly centered on the page. Here is a slight revision of your code.
.supporting .col {
float: left;
width: 33.33%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 64px;
padding: 0px 0px;
}
I'm trying to copy the Facebook's notification's blobs by using CSS3 ::before pseudo-element. I added a maximum height value and everything I tried isn't enough to reduce the space between the number and the beginning of the box. Any ideas on how to reduce/eliminate it?
Code:
HTML: <li notificaciones="3">[...]
SCSS:
*[notificaciones]:not([notificaciones="0"]){
&::before{
content: attr(notificaciones);
position: absolute;
color: $color-cajas-notificaciones-texto;
background-color: $color-cajas-notificaciones-fondo;
max-width: 25px;
font-size: 16px;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: 800;
height: 20px;
float: left;
z-index: 999;
width: 20px;
text-align: center;
vertical-align: top;
top: 0px;
padding: 0 1px;
color: white;
text-shadow: 0px 0px 1px;
background-color: #f03d25;
border: 1px solid #d83722;
border-bottom: 1px solid #c0311e;
border-top: 1px solid #e23923;
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 39, 121, 0.77);
display: block;
}
I didn't understand question well, but maybe you want like this
http://jsfiddle.net/zxshz/36/
<ul>
<li data="3"></li>
<li data="7"></li>
<li data="15"></li>
</ul>
/* css */
ul{
width: 250px;
}
li{
list-style: none;
float: left;
margin-right: 8px;
width: 18px;
height: 18px;
background: #9c0;
position: relative;
}
li:after{
content:attr(data);
padding: 1px 2px 2px 3px;
position: absolute;
background: red;
right: -3px;
top: -5px;
font-weight: bold;
text-align: center;
font-size: 9px;
border-radius:2px ;
color: #fff;
}
li:nth-child(1){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 0 no-repeat;
}
li:nth-child(2){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -58px no-repeat;
}
li:nth-child(3){
background: #fff url(https://dl.dropboxusercontent.com/u/77028632/sarhov.com/fb.png) 0 -29px no-repeat;
}
I can't understand what is your problem, put your code please
It's was just a matter of referring to the official documentantion on Line Height Calculations
line-height: /*same as height property*/
vertical-align: top;
I'm making a webpage with a fixed footer. If there is a lot of content, there must be a scroll bar. If there is only one line of input in the content-part, there is no need to scroll. The way the page is made now, gives me a scroll bar all the time! It scrolls just as far so that the header disappears from the screen. --> My header is 150px high and I can scroll exactly 150px. But I don't want this. What is wrong with my html or CSS?
This is the html:
<body>
<div id="header">
<h1>The <span>ultimate</span><br />DVD collection</h1>
</div>
<div id="main_wrapper">
<div id="main">
<div id="choose">#abcdefghijklmnopqrstuvwxyz</div>
<div id="content">Main content comes here.</div>
</div>
</div>
<div id="footer">
<p>My Name <span>admin log-in</span>
</p>
</div>
Here's my CSS:
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 150px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
height: 100%;
min-height: 100%;
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 100%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 40px;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
You can also see my code in this jsFiddle.
What am I doing wrong? (look at the scroll bar in the picture)
Thanks in advance!
Remove height:100% on the main-wrapper. The height of 100% means 100% of the available space inside the parent (the header and the main-wrapper has the same parent). But the main-wrapper is not aware of the headers height. So the result will be 100% + 150px.
I have made a few adjustment in style.
I have given percentage height for your container(you can adjust them as per you need) and scroll property to div.
<style>
html, body {
height: 100%;
margin: 0 auto;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #666;
font-size: 12px;
line-height: 1.5em;
/*position: relative;*/
}
#header {
height: 15%px;
background: linear-gradient(left, #2a2620, #a35e47);
border-top: 10px solid #f6e6c5;
border-bottom: 10px solid #f6e6c5;
background-color: #a35e47;
}
h1 {
width: 960px;
margin: 35px auto 0;
font-family:'Luckiest Guy', cursive;
font-size: 3.5em;
line-height: 1em;
text-transform: uppercase;
font-weight: 400;
color: #a35e47;
text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
font-family:'Aclonica', Verdana, sans-serif;
font-size: 1.75em;
}
#main_wrapper {
/*height: 100%;*/
/*min-height: 100%;*/
background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
background-repeat: no-repeat;
background-position: 50% 60%;
background-color: #5a646d;
}
#main {
width: 960px;
height: 70%;
margin: 0 auto;
background-color: #fff;
opacity: .75;
/*overflow: auto;*/
overflow:scroll;
}
#choose {
margin-left: 20px;
font-family: georgia, serif;
font-style: italic;
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
line-height: 2em;
letter-spacing: 20px;
overflow: hidden;
}
#content {
margin-left: 20px;
margin-right: 20px;
}
#footer {
height: 15%;
width: 100%;
border-top: 10px solid #f6e6c5;
background: linear-gradient(left, #2a2620, #a35e47);
position: fixed;
left: 0;
bottom: 0;
}
</style>
I worked around it using this explanation: http://dorayme.netweaver.com.au/ciaran.html
My wrapper now has a position:absolute with top: and bottom: equal to the height of header and footer (+ height of borders)
#main_wrapper{
position: absolute;
top: 170px; /* header + bordertop + borderbottom */
bottom: 50px; /* footer + bordertop */
left: 0;
right: 0;
background-image: url('path/to/img.jpg');
background-repeat: no-repeat;
background-position: 50% 40%;
background-color: #5a646d;
}
Thx to Johan Sundén for pushing me into the right direction!!