I am I using percentages based grid system to build a page for my personal website which uses a relative positioned banner and an absolute positioned div that falls in the center horizontally and at the bottom of the banner vertically. However, because said div is a screenshot of a webpage it is important to keep its height and its width relative to one another so that the image doesn't distort.
Below is a little code and a jsfiddle -
<div id="aps-group-banner">
<div id="aps-group-banner-wrap">
<div class="screenshot-banner"></div>
</div>
</div>
#banner {
height:100%;
background:red;
}
#banner-wrap {
position:relative;
width:67%; height:100%;
}
.screenshot {
position:absolute;
background:url(/img/case-study/aps-group/screenshot-banner.jpg) top left;
background-size:100% 100%;
width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}
http://jsfiddle.net/sHanf/
Hope you guys can help! Thanks in advance
Liam
Maybe I don't understand the question completely, but is this what you need?
http://jsfiddle.net/RpW4r/
I just changed the background-size to 100% auto;
Give this a try:
.screenshot {
position:absolute;
background: url(http://liamhodnett.com/img/case-study/aps-group/screenshot-banner.jpg) bottom left no-repeat;
background-size:100% auto;
width:75%; min-height:496px; bottom:0; margin-left:-37.5%; left:50%;
}
This will scale the background to 100% width and adjust its height to be proportional, plus move it to the bottom of the .screenshot element.
Fiddle link: http://jsfiddle.net/sHanf/7/
Related
I have a question which is asked over a thousand times, I spent whole morning reading simulair question but just cant get mine fixed so hope anyone can help me out.
this is my demo: http://jsfiddle.net/skunheal/4qx6a/1/
#one{
width:100%;
min-height:100%;
background-image:url('http://www.vloerenmantegels.nl/upload/userfiles/Ariostea_Pietre_Black_Ardesia_wi1.jpg');
background-attachment:fixed;
color:#fff;
}
#two{
width:100%;
min-height:100%;
background-color:transparent;
position:relative
}
#content{
min-height:60%;
position: absolute;
bottom:0px;
background:#ff9900;
}
I have 3 divs, all 100% height the first div (div.one) has a picture which is attached fixed The second div (div.two) has an orange textbox div in it(div.container), which is positioned absolute and bottom:0px so it sticks to the footer of div.two. div.two has a transparant background (its white in the fiddle because I cant seem to set it to transparant)
Now when you start scaling the window you see the orange box (div.content) will start expand ing upwards because the text has les space horizantal, but as soon as its the full height of div 2 is just keeps going and starts overlaping div.one, While I want it tp push itself down against div one and make his prant div.two bigger.
How can I fix this because I cant find a way to do this without using javascript.
http://jsfiddle.net/4qx6a/2/
Positioned with relative.
BTW, setting min-height:100% on your container and more than one on the inside is probably not the desired effect, unless you want each one to take up the entire height of the window.
I've made a similar one which you can use. This is working fine if i understood your question correctly.
the HTML
<div id="one"></div>
<div id="two">
<div id="content"></div>
</div>
<div id="three"></div>
the CSS
* {
margin:0;
padding:0;
}
body, html {
height:100%;
}
#one {
width:100%;
height:100%;
background:pink;
}
#two {
position:relative;
width:100%;
height:100%;
background:transparent;
}
#content {
width:100%;
background:grey;
border-top:3px solid black;
position:absolute;
bottom:0;
min-height:60%;
}
#three {
width:100%;
height:100%;
background:green;
}
working Fiddle Link
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
Well.. my english is not good, so i draw what i want..
FULL PAGE: http://d-3.me/full.jpg
The green container it's my content wrap. The Black and Red Squares, are some button's to access another pages.
So when i resize the page, i want to keep theses button's like this another image:
1024px Window Views: http://d-3.me/1024.jpg
this is my initial HTML :
<div id="wrap_home_bts">
<div class="bt_woman"></div>
<div class="bt_man"></div>
</div>
and this is my css:
#wrap_home_bts{
position:relative;
width:100%;
height:100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
position:absolute;
left:0;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
right:0;
bottom:74px;
}
but this way, the "button's" accompanies the resized window.
I clear?
Instead of positioning your blocks using left and right 0px, position them to 50%, and then align them the way you want using a negative margin. This should work, although you'll have to adjust the margins to fit exactly like you want:
#wrap_home_bts{
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.bt_woman{
width:880px;
height:389px;
background:#FFCC00;
display: block;
position:absolute;
left:50%;
margin-left: -650px;
bottom:245px;
}
.bt_man{
width:733px;
height:168px;
background:#CC00FF;
position:absolute;
display: block;
left:50%;
margin-right: -650px;
bottom:74px;
}
http://jsfiddle.net/E4mmz/
.bt_woman and .bt_man are absolutely positioned in #wrap_home_bts which's width is set to 100%. That way #wrap_home_bts size will change with browser resizing and the position of .bt_woman and .bt_man will follow this element. Perhaps it will be better that .bt_woman and .bt_man to be outside the #wrap_home_bts. Then you may set some width to the body element with javaScript, like the width of the screen. That way they will never change there position on resize.
I have been looking for an answer to this question all over the interwebs, but I just can't find the answer.. I have a transparent header filled with a background image that is the same as my background, and I want my main div to scroll underneath it so the text is hidden. Here is the HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
And here is the CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
I have made a jsFiddle which can be found here: http://jsfiddle.net/qcaJJ/. Can you please help me out on how to get this working? Thanks in advance!
ps. Please don't mind the footer, I've used the footer from another page of mine, I don't want this one on this page :p
pps. If anyone knows a way to let the nav stay on it's place and the main2 div scroll, you're my hero! Kinda new to HTML and CSS..
In addition to using fixed position for the header, as the other answers pointed out, you're also using a background image with transparency, so when the main section scrolls underneath, you still see it. You need to add a background color like so, to make sure that the header div covers over what's scrolling underneath:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
See my JSFiddle here: http://jsfiddle.net/qcaJJ/3/
You need a fixed position for your header rather than an absolute positioning for all the rest of your page.
.header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:red;
}
.content{
margin-top:100px;
font-size:180%;
}
The top must be position:fixed for that to work. This ensures that it is always stuck at the top of the screen.
You may also want to set the z-index to something like 1000 so that it always stays on top of everything else.
I have a div:
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;
And a html, body:
html, body {
height:100%;
width:100%;
}
/* Body styles */
body {
background:url(../images/background.png) top center no-repeat #101010;
color:#ffffff;
}
My code is basically 20 loren ipsum paragraphs followed by the div.
Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it
I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.
I tried fixed but that just fixed it.. no use to me
How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not
Ok, fixed and working :D Hope it does what you want it to.
Preview here: http://jsfiddle.net/URbCZ/2/
<html>
<body style="padding:0;">
<div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
test content :D
</div>
<!--Content Here-->
</div>
</body>
</html>
Shorter solution:
.footer {
bottom: 0%;
position: fixed;
}