My footer background image is not showing. I cant figure out why.
Any help would be greatly appreciated. Thank you.
/* Footer */
}
.footer {
height: 400px;
width: 100%;
background: url(/images/space.jpg);
background-size: cover;
}
.footer .container {
position: relative;
top: 200px;
}
.footer p {
color: #fff;
font-size: 15px;
margin: 0px 0 20px 0px;
padding: 50px 0 0;
}
Related
Can someone help me how can I move my footer to the bottom using position: relative?
FOOTER PROBLEM PHOTO
#page-footer {
.list-inline {
display: none;
}
}
.s-footer {
background-color: $primary;
margin-top: auto!important;
padding: 0px !important;
border-top: 1px solid $primary;
font-size: 0.875rem;
color: $default;
.tool_dataprivacy {
display: none;
}
.helplink {
display: none;
}
}
.c-container {
width: 100%;
text-align: center !important;
}
This is the code from the theme, i haven't made any changes from that code. Thank you!
You need to set min-height to container
.c-container {
width: 100%;
text-align: center !important;
min-height: 80vh; //adjust this accordingly
}
Or make the footer fixed
.s-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
I need some help finessing a layout I’m working on.
Here is a link to the current status of the site:
http://sometimesyoubreakaclarinet.com/
What you’ll see is a large pink area behind the gray content area, it is roughly a third down the page. For some reason, it is only forming to 100% of the height/width of the browser when I actually want it to match the height of the content. How do I get the height to fill down to fit to the content, in the same way the gray content area is already doing?
Secondly, I want this pink area to begin at the end of the background banner image at the top rather than where it is now. How do I achieve this? Do I need to change the position from relative to something else?
The goal here is to have the pink area flow over the banner image and title; something like what is outlined here:
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect
I’ve include what I think is the relevant CSS code below, possibly I’ve left something important out but you should be able to locate the CSS file on the link above if necessary.
#menu { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px;
position: fixed; }
#sitetitle { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; } #deck { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative;
background: transparent; z-index: 4; }
#card { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px;
text-decoration: none; background: #2c2c2c; }
#curtain { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative;
background: #f12fde; z-index: 2; }
Hopefully someone can help me figure this out. Thank you!
does this fix your issue? Change the css of #curtain to..
#curtain {
width: 800px;
height: auto;
min-height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
background: #f12fde;
z-index: 2;
top: 0;
}
This css below works with a workaround of taking the margin at -22px in the body. I was wondering if there might be a better way to do this. I have a full width background image and I want the nav bar to be the same.
html {
background: repeating-linear-gradient(transparent 0%,transparent 90%,#000000 100% ),
url("../../Images/bg2.jpg") center center no-repeat;
background-size: 100%;
height: 135%;
}
body{
margin: -22px auto;
padding: 0 auto;
}
nav{
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: white;
}
CSS
jsFiddle
html {
background-image: url(http://placehold.it/1800x900);
background-size: cover;
}
body{
margin: 0; /* override the default 10px margin */
}
nav{
width: 100%;
float: left;
background-color: white;
}
Just redoing our captcha.
Demo: http://sitehelp.com.au/demos/ttt/422.php
Anyhoo the css is as follows:
.funcaptcha { width: 81px; overflow: hidden; float: left; margin-right: 0px; }
.funcaptcha a { display: inline-block; background: url("http://sitehelp.com.au/demos/ttt/images/ttt-small.png"); margin: 2px 2px 0 0; float: left; }
.funcaptcha a.circle { background-position: 0px -29px; }
.funcaptcha a.cross { background-position: -29px -83px; }
.funcaptcha a.empty { background-position: -0px 0px; }
.funcaptcha a.marked,
.funcaptcha a:hover { background-position: -29px 0px; }
.funcaptcha .box { display: block; cursor: pointer; overflow: hidden; width: 25px; height: 25px; }
Contains php, so unable to do a fiddle. But My css positioning is just off a tad, any suggestions ?
the ttt-small.png is:
So that it can be marked answered....
Bottom layer is 25 pixels tall and the top layer is 26. Sprite needs to be fixed.
Here's an editable jsFiddle with the HTML and CSS: http://jsfiddle.net/WhG5L/
i have a twitter layout, well sorta.. the main table kinda looks like it, with the way it's sectioned off...
html {
-webkit-user-select: none;
text-shadow: 2px 2px 2px #000;
color: #fff;
font-smooth: always;
padding: 0;
width: 100%;
height: 100%;
background: url("./img/main_back.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
body
{
height: 100%;
width: 100%;
}
.content_wrap {
position: relative;
top: 5px;
display: inline-table;
margin-right: auto;
margin-left: auto;
width: 90%;
height: 100%;
background-color: transparent !important;
}
.left_table {
overflow: hidden;
display: table-cell;
text-align: center;
width: 50%;
height: 100%;
padding-left: 5px;
padding-bottom: 20px;
}
.right_table {
display: table-cell;
text-align: center;
width: 20%;
height: 100%;
}
html5 doc type
header <-- floated left
section <-- floated right
section <-- content wrap
section <-- left_table
aside <-- right_table
footer <-- fixed position, bottom 0px
markup is spot on, i check it with the w3c site all the time.
can't get it to center, it's off center by about 30 to 40px, anyone have any ideas?
I notice that nowhere in yoru code do you actually have a center on your content div...
Perhaps you mean this?
body
{
height: 100%;
width: 100%;
text-align: center;
}
Also, first comment has a point.