I have implemented a full, non scrolling background image with CSS. However, when the content itself overflows the page no scrollbars appear and the content cannot be seen. I have tried using various variations of "overflow: scroll" in a few of my divs but to no avail; scroll bars appear but they do not scroll, or do not scroll properly. I think there may be a structural problem with my divs but I'm not particularly experienced with CSS and couldn't find a thread similar to this on StackOverflow.
http://jsfiddle.net/YXp5p/
<body>
<div id="bg">
<img src="images/background.jpg">
</div>
<div id="wrapper">
<div id="header">
thread #6bUp0
</div>
<div id="sidebar">
<div id="content">
<div id="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat ante, placerat accumsan aliquam at, rhoncus eget nunc.
</div>
</div>
</div>
</div>
</body>
body{
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 16px;
}
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
#wrapper {
position: fixed;
top:0%;
left:18%;
width: 59%;
height:200%;
padding: 0%;
}
#header {
background: url(images/header.gif) repeat-x;
border: 1px solid black;
width: 100%;
height:29px;
padding-left: 3%;
padding-right: 3%;
padding-top: 6px;
font-family: "Lucida Console", "Courier New", sans-serif;
text-align: center;
font-size: 20px;
font-weight: bold;
}
#sidebar {
background-color: #EEEEEE;
width: 100%;
height: 100%;
padding-left: 3%;
padding-right: 3%;
right: 3%;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
border-left: 1px solid #000;
border-right: 1px solid #000;
opacity: 1;
padding-top: 8px;
}
#post{
margin-left: 8px;
margin-right: 8px;
margin-bottom: 5px;
background-color: #FFF;
opacity: 1;
}
You are looking for background-attachment:fixed not position:fixed you can achieve what you want like this:
body{
background-image:url('images/background.jpg');
background-position:center top;
background-attachment:fixed;
margin: 0px;
color: #000;
font-family: helvetica, times;
font-size: 16px;
}
Oh, and remove the:
<div id="bg">
<img src="images/background.jpg">
</div>
part of your document.
Related
Trying to recreate this layout:
The problem is the white box on top of the black. I don't know the height of the black box. How can I create the white box on top of the others?
This is my code:
https://codepen.io/olefrankjensen/pen/oQyZpX?editors=1100
HTML
<div class="container">
<div class="formbox">[login form markup here...]</div>
<div class="box">
<h1>Don't have an account</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta cumque harum.</p>
<button>SIGN UP</button>
</div>
<div class="box">
<h1>Have an account</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus dicta cumque harum.</p>
<button>LOGIN</button>
</div>
</div>
CSS
// reset
h1, h2, h3, h4, h5, h6, p, button, div {
margin: 0;
padding: 0;
line-height: 1;
}
// font
#import url('https://fonts.googleapis.com/css?family=Roboto');
// colors
$white: rgba(255,255,255,.8);
:root {
font-size: 16px;
}
body {
background-image: url(
https://picsum.photos/1200/800?);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Roboto', sans-serif;
color: $white;
}
.container {
width: 900px;
margin: 50px auto;
background: rgba(0,0,0,.5);
position: relative;
display: flex;
}
.box {
padding: 5rem 3rem;
float: left;
h1, p {
margin-bottom: 1rem;
}
button {
padding: 1rem 2rem;
background: transparent;
border: 2px solid $white;
border-radius: 6px;
color: $white;
text-align: center;
font-size: 1rem;
cursor: pointer;
text-transform: uppercase;
}
}
.formbox {
width: 500px;
background: white;
margin-left: -50px;
margin-top: -25px;
box-shadow: 0 0 50px black;
display: block;
position: absolute;
}
I have to absolute position the .formbox to not make it "interfere" with the other flex items in the flex container .container. But as a consequence it has no height.
How can I give the Login overlay full height of it's parent?
When position is absolute, top, bottom, right and left properties work relative to the first parent with position: relative.
So, you don't really need the margin-top: -25px or margin-left: -50px, you can just add top: -25px; bottom: -25px; left: -25px to .formbox and you are done. If you need to move it to the right, just add right: XXpx and remove left (or set a positive value like left: 50%).
https://codepen.io/anon/pen/gQKWNq?editors=1100
I could go with adding to formbox class a height of 100% + 50px (margin -25px what you have took x 2). You can do this with calc function: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
.formbox {
width: 500px;
background: white;
margin-left: -50px;
margin-top: -25px;
box-shadow: 0 0 50px black;
display: block;
position: absolute;
height: calc(100% + 50px);
}
I'm currently trying to add some simple padding to the bottom of my testimonial element, so that it doesn't end right after the text.
It seems that no matter what value I enter in padding or padding-bottom, the bottom padding expands a set amount. I'm wondering how to fix this so it displays padding that is specific to the value I set.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
How padding shorthand works....
default declaration of padding looks like this:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
You can abbreviate that and apply padding to all sides equally:
padding: 10px;
You can abbreviate a little less and apply different values to top and bottom, and right and left.
This equates to padding: top/bottom right/left;
padding: 10px 20px;
You can use full abbreviations to apply different values to each of the 4 sides independently:
This equates to padding: top right bottom left; or:
padding: 10px 20px 5px 20px;
In your CSS you have no top or bottom padding applied to the testimonial class, you only have right/left padding applied:
.testimonial {
padding: 0 5%;
}
You basically have (pseudo code as example):
.testimonial {
padding: top=0 right=5% bottom=0 left=5%;
}
If you want a the same padding all the way around, remove the first 0 in the property:
.testimonial {
padding: 5%;
}
If you want a similar top/bottom padding, then merely adjust the padding property to add top/bottom values:
.testimonial {
padding: 10% 5%;
}
If you want different padding on the top and bottom, then adjust the padding property to add all the values:
.testimonial {
padding: 0 5% 10% 5%;
}
You don't have any bottom padding. Changing to padding: 10px 5% adds 10px padding to the top and bottom, 5% to the left and right.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 10px 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5% 5% 0;
background-color: rgba(50, 173, 140, 0.82);
}
Adding all of the values ( even if 0 ) solved the problem right away.
Also, I am aware that if only two values are given the 1st represents top and bottom.
You don't currently have padding on the bottom of the testimonial div.
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 1% 5%;
background-color: rgba(50, 173, 140, 0.82);
}
Change the padding to the above ... padding: 1% 5%; or to target specifically the bottom ... padding 0 5% 1%; ... do that and you should be good to go, unless I'm misunderstanding your question. Good luck!
Found that having the last set of text in .testimonial in a paragraph tag, it was inserting a line break. So simply took that away and now it seems to be working fine.
I'm having issues forcing a link to take full height of its parent container.
Here is a Fiddle of my code: http://jsfiddle.net/z2ua5g4j/
a > span.button-single {
font-size: 30px;
color: #fff;
display: block;
margin-bottom: 8px;
margin-left: 0px;
}
.box {
background-color: #f5f5f5;
border: 1px solid #dcdcdc;
height: 100%;
}
.box h1 {
color: #667477;
font-size: 24px;
margin-left: 20px;
}
.box p {
color: #b1b1b1;
font-size: 13px;
margin-left: 20px;
margin-bottom: 20px;
}
.box a.button {
width: 95px;
background-color: #b4b4b4;
margin-right:-1px;
color: #fff;
padding-top: 13px;
padding-bottom: 13px;
font-size: 15px;
line-height: 16px;
text-align: center;
float: right;
height: 100%;
display: block;
}
.box a.button:hover {
text-decoration: none;
background-color: #a7a7a7;
}
Basically, I want to make the gray button (on the right) take full height of the box container. As of writing, I've tried setting the link to display block and set its height to 100%, but with no avail.
Any ideas?
I changed box to 100px, and setup parent elements of the button to have 100% height
However, you still may want to take a look at http://webdesign.about.com/od/csstutorials/f/set-css-height-100-percent.htm to understand how height:100%; is different from width:100%;. I'm guessing you believe they work the same.
#import url("http://getbootstrap.com/dist/css/bootstrap.min.css");
a > span.button-single {
font-size: 30px;
color: #fff;
display: block;
margin-bottom: 8px;
margin-left: 0px;
}
.box {
background-color: #f5f5f5;
border: 1px solid #dcdcdc;
height: 100px;
}
.box h1 {
color: #667477;
font-size: 24px;
margin-left: 20px;
}
.box p {
color: #b1b1b1;
font-size: 13px;
margin-left: 20px;
margin-bottom: 20px;
}
.box a.button {
width: 95px;
background-color: #b4b4b4;
margin-right:-1px;
color: #fff;
padding-top: 13px;
padding-bottom: 13px;
font-size: 15px;
line-height: 16px;
text-align: center;
float: right;
height: 100%;
display: block;
}
.box a.button:hover {
text-decoration: none;
background-color: #a7a7a7;
}
.row{
height: 100%;
}
<div class="box">
<div class="row">
<div class="col-sm-10">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum purus ut pretium ultricies. Cras pulvinar tincidunt lorem, ut posuere risus mollis in. Fusce pharetra urna nec sagittis suscipit.</p>
</div>
<div class="col-sm-2" style="height:100%;">
<span class="button-single glyphicon glyphicon-plus-sign"></span> More<br/>Details
</div>
</div>
</div>
Just use the btn-block class instead of messing around with div heights, like this:
<div class="col-md-3"><button class="btn btn-block" >Show Details</button></div>
So I have a base div and a hover div (will display:block in js on mouseover).
Anyways I'm having the hardest time making the height and width of my hover div match the height and width of my base div.
I think the problem is because of my responsive code, also in the base div the image is actually over another background image and width and height is set to 95% to create a border effect.
#user-options li img.role-photo {
width: 95%;
height: 95%;
padding-top: 5px;
}
I've uploaded my work to a test link here.
As you can see, over the 2nd "card" I have the hover div showing. The opaque white box with the 'Sign in with Facebook' button is suppose to cover up the image of the singer below. I can't seem to get it working right :(
Here is my jsfiddle
http://jsfiddle.net/leongaban/PWVBp/
HTML from current page:
<ul id="user-options">
<li>
<img class="role-photo" src="../images/registration_fan_tile.png" alt="Fan"/>
<h3>Fan</h3>
<p>Calling all tastemakers! Influence Hollywood, don't just consume it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li style="">
<div class="role-card-talent" style="position: relative;">
<img class="role-photo" src="../images/registration_talent_tile.png" alt="Talent"/>
<!-- Hover Controls -->
<div class="hover_controls" style="display:block;">
<img class="fb-signin" src="../images/registration_signin_fb.png">
<div class="learn_about_pages learnMoreLink" tag="" style="margin:10px">
<img src="../images/registration_info_icon.png">Learn More
</div>
</div><!-- hover_controls -->
</div><!-- role-card-talent -->
<h3>Talent</h3>
<p>Oh, Hai! Now you are on your way to being "connected." You're welcome. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
CSS
#user-options {
margin:0px; padding:0px; float:left; width:100%; list-style-type:none;
}
#user-options li {
position: relative;
float:left;
width:20%;
margin: 1%;
text-align: center;
padding: 5px;
background: url("../../images/one_background.png") no-repeat;
background-size: 100% auto;
overflow: hidden;
}
#user-options li img.role-photo {
width: 95%;
height: 95%;
padding-top: 5px;
}
.hover_controls {
position: absolute;
margin: 0;
top: 5px;
left: -5px;
padding: 5px;
/*padding-top: 20px;*/
width: 100%;
height: auto;
/*min-height: */
text-align: center;
color: #409ad5;
font-size: 0.875em;
font-weight: bold;
background: rgba(255,255,255,.5);
background-size: 100%;
}
.hover_controls a {
color: #666;
font-size: 0.750em;
}
.hover_controls img.fb-signin {
width: 100%;
}
Set your height to 100% on the .hover_controls in your css. see jsfiddle
http://jsfiddle.net/cornelas/PWVBp/3/
.hover_controls {
position: absolute;
margin: 0;
top: 5px;
left: -5px;
padding: 5px;
/*padding-top: 20px;*/
width: 100%;
height: 100%; /** CHANGE TO 100% **/
/*min-height: */
text-align: center;
color: #409ad5;
font-size: 0.875em;
font-weight: bold;
background: rgba(255,255,255,.5);
background-size: 100%;
}
Simply add bottom: 5px; to your .hover_controls class, so it looks like:
.hover_controls {
position: absolute;
margin: 0;
top: 5px;
bottom: 5px;
left: -5px;
padding: 5px;
/*padding-top: 20px;*/
width: 100%;
height: auto;
/*min-height: */
text-align: center;
color: #409ad5;
font-size: 0.875em;
font-weight: bold;
background: rgba(255,255,255,.5);
background-size: 100%;
}
If you set top and bottom or left and right to absolute block inside relative block, it will stretch its height/width in a way that its bottom and top lines or left and right borders will be in x pixels from corresponding sides of parent relative div
Demo: http://jsfiddle.net/PWVBp/5/
I have css for displaying an image content on the left and a sidebar on the right. The image can vary in side and orientation (landscape, portrait), therefore I want the details sidebar on the right side of the image to be relatively positioned to the image.
Here is the screenshort:
The css code is as follows:
* {
margin: 0;
padding: 0;
}
a {
/* text-decoration: underline; */
text-decoration: none;
color: #6B2E42;
}
a:hover {
text-decoration: none;
}
body {
background: #C9CFCD url(images/img01.gif);
font-size: 11pt;
color: #323232;
line-height: 1.75em;
}
body,input {
font-family: Arial, sans-serif;
}
#content {
/* HOLDS THE IMAGE */
background: #FFFFFF;
/* width: 595px; */
color: #6E6E6E;
padding: 10px 10px 0 35px;
float: left;
border-bottom: solid 2px #BBC1BF;
}
#page {
margin: 20px 0 20px 0;
position: relative;
width: 980px;
padding: 0;
}
#page ul {
list-style: none;
}
#page ul li {
padding: 2px 0 2px 0;
border-top: solid 1px #D9D9D9;
}
#sidebar {
background: #FFFFFF;
margin: 0 0 0 685px;
color: #6E6E6E;
padding: 10px 10px 10px 20px;
width: 225px;
border-bottom: solid 2px #BBC1BF;
}
#wrapper {
width: 980px;
margin: 35px auto 0 auto;
position: relative;
}
And here is the layout:
<body>
<div id="page">
<div id="content">
<p>
<img src="Mona_Lisa_by_Leonardo_da_Vinci.jpg">
</p>
<br class="clearfix" />
</div>
<div id="sidebar">
<h3>DETAILS</h3>
<div class="date-list">
<ul class="list date-list">
<li class="first"><span class="id">ID:</span> 1</li>
<li class="last"><span class="ref">REFERENCE No.:</span> LSK001</li>
<li><span class="title">TITLE:</span> Monalisa</li>
<li><span class="obj">OBJECT TYPE:</span> Painting</li>
<li class="last"><span class="mat">MATERIAL USED:</span> Canvas,oil...</li>
<li class="last"><span class="tech">TECHNIC:</span> brush stroking...</li>
<li class="last"><span class="width">WIDTH:</span> 1 meter</li>
<li class="last"><span class="height">HEIGHT:</span> 3 meters</li>
<li class="last"><span class="artist">ARTIST:</span> Da Vi nci</li>
<li class="last"><span class="source">SOURCE:</span> ....</li>
</ul>
</div>
<h3>DESCRIPTION</h3>
<p>
Urna dis suscipit lorem sed luctus. Elementum suspendisse tempus fermentum ornare libero phasellus nibh conseuqat dolore.
</p>
</div>
<br class="clearfix" />
</div>
</body>
Please, see attached screenshort for the layout in the browser.
joseph
So if picture is small - sidebar on the right, if large, sidebar under the image?
#page{
width: 600px;
margin: 0 auto;
background-color: #efefef;
overflow:hidden;
}
#content,
#sidebar{
float:left;
}
#sidebar{
margin: 10px;
padding:10px;
background-color: tan;
}
.clear{
clear: both;
}
http://jsfiddle.net/sy9xM/1/ - you can change img width to check the result. Does it works for you?