I'm trying to create a responsiveness sticky footer but without any success. I have followed every guide and every common best practices. Here it is my example: example
In the example I would put the footer at the bottom of the page.In addition I would use an image as background of the entire page
.blur {
height: 100%;
background: url('image.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Do you have any idea?
keep your HTML just as is, and change your CSS to this (obviously you'll change it later to your needs, I just added styling for visualization purposes):
html, body {
background-color: #FFF;
font-family:'Raleway', 'Open Sans', sans-serif;
font-weight: 400;
}
body {
color: #333;
background:url('http://2.bp.blogspot.com/-OSVC5PTEAKU/TZNnUHaoJZI/AAAAAAAAApo/WcP3qSUPAoo/s1600/monta%2525C3%2525B1as%252520verdes%255B1%255D.jpg') no-repeat 50%;
background-size:cover;
min-height: 100vh;
padding-bottom:80px /* footer height + 20 px for spacing, but adjust as you like */;
}
a {
color: #eee;
}
a:hover, a:focus {
text-decoration: none;
color: #dedede;
}
/* Langind Page */
.inner {
margin-top: 20px;
}
.btn-facebook-inner {
margin-top: 80px;
padding: 30px;
}
.btn-facebook {
width: 300px;
border-radius: 4px;
background-color: #3B5998;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
font-family:'Lucida Grande', sans-serif;
}
.btn-facebook:hover, .btn-facebook:focus {
color: #dfe3ee;
text-decoration: none;
}
footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:60px;
background:#fc0;
}
footer .social-icons > ul > li {
padding-right: 12px;
}
See fiddle here
This will make the bottom to be fixed, so if you have a lot of content, the footer will overlap the content. If you don't want this behavior, change fixed to absolute
Just a comment I have seen on your code and see as a recurrent error around here: while it's common to target html and body together, they're NOT the same thing and not all styles applies to both
I looked at this and went a different way. If you are inherently setting a "height" value for the footer, while your footer will still "respond", the background follows the styling and will only display at "n px" leaving you with the body color below.
Use the following code
HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
CSS:
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
Edit
HTML
<!-- Wrap all page content here -->
<div id="blur">
<!-- Begin page content -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 inner">
<h1 class="text-center">Title</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 btn-facebook-inner">
Login with Facebook
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-9 social-icons">
<ul class="list-inline">
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</div>
<div class="col-md-9 col-md-pull-3">
<ul class="list-inline">
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div>
</div>
</div>
</div>
CSS
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
#blur {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
Related
I want to style a nav with a border that overlaps the text, and a text that overlaps an image in order to achieve the layout in the example below.
I tried different methods but nothing worked
Example:
Example 1
here is what I got so far:
Example 2
.menu-link {
list-style: none;
margin: 2rem 0;
text-align: right;
border: 1px white solid;
}
.menu-link a {
text-decoration: none;
font-family: "Montserrat", sans-serif;
color: rgba(255, 255, 255, 0.8);
font-size: 4rem;
text-transform: uppercase;
}
img {
display: block;
object-fit: cover;
}
.intro-image {
position: relative;
width: 100%;
}
.intro-image::after {
content: "";
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section class="intro-block">
<div class="intro-text">
<h1>Front-End Developer <br />UI Designer</h1>
</div>
<div class="hero-right">
<ul class="hero-menu">
<li class="menu-link">About</li>
<li class="menu-link">Projects</li>
<li class="menu-link">Contact</li>
</ul>
<div class="intro-image">
<img src="./images/heroimg.jpg" alt="" />
</div>
</div>
</section>
I tried using "position: absolute" for the hero text but the image moves to the left.
for the navigation, I'm thinking of adding an element to HTML to contain the nav links and put a position absolute on it instead of adding border in CSS, maybe?
Is there anyway to achieve this layout? Any help is much appreciated!
You could make your elements a fixed width and height. With negative position values you can make it go outside the box. I don't know if this is what you are looking for:
html:
<html>
<head>
</head>
<body>
<div id="wrapper">
<div class="box">
<h1>About</h1>
</div>
<div class="box">
<h1>Projects</h1>
</div>
<div class="box">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
css:
#wrapper
{
position:absolute;
right:150px;
}
.box
{
position:relative;
border: 1px solid black;
width:200px;
height: 50px;
}
.box h1
{
position:absolute;
right: -50px;
top:-18px;
}
https://jsfiddle.net/cm03bjex/21/
The position:relative makes sure that the absolute position is relative to the box not the whole screen.
If you upload an image which has higher height and less width then it shows very poorly in the card (user cards). Here are the HTML and css parts. We are using Angular with it:
HTML
<div class="container-fluid" >
<div class="row people-row">
<div class="col-12 row">
<div class="m1-* col-md-3 text-center" *ngFor="let user of filteredUsers | filter: searchByKeyword: 'name' | paginate: { itemsPerPage: 12, currentPage: p }">
<div class="card card-person">
<a (click)="ViewUser(user)">
<img class="card-img-top" src="http://res.cloudinary.com/dfg5p1pww/image/upload/v{{user.picVersion}}/{{user.picId}}"
alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title"> {{user.firstName}} {{user.lastName}}</h4>
<p class="card-text">{{user.age}}</p>
<p class="card-text">{{user.country}},{{user.city}}</p>
<p class="material-icons" *ngIf="CheckIfOnline(user.username)">online</p>
<a class="btn button-image closeButton btn-message" [routerLink]="['/chat', user.username]">Message</a>
</div>
</a>
</div>
</div>
</div>
CSS
.card-img-top {
position: relative;
overflow: hidden;
height: 200px;
width: auto
}
.card-person {
margin: 50px auto;
background-color: #ffffff;
border-radius: 0;
border: 0;
box-shadow: 1em 1em 2em rgba(0,0,0,.2);
}
.card-text {
margin-bottom:0.2rem
}
.btn-match,
.btn-message {
color:#ffffff;
background: #FF512F; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FF512F, #DD2476); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FF512F, #DD2476); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
transition: all .4s;
margin:5px;
border-radius:40px
}
.button-image:before {
content: "";
width: 23px;
height: 23px;
display: inline-block;
background-size: 100%;
vertical-align: text-top;
background-color: transparent;
background-position : center center;
background-repeat:no-repeat;
}
.btn-match.closeButton:before{
background-image : url('../../../assets/images/heart-white.png');
}
.btn-message.closeButton:before{
background-image : url('../../../assets/images/chat-white.png');
}
a.fill {
width: 100%;
height: 50px;
}
What can cause such an issue and how can this problem be fixed in Bootstrap 4 so all type of images can be look normal?
The issue is caused by the background-size CSS property. When set to 100% the browser is trying to stretch the background image to fill the container in both directions.
The background-size property takes several "keyword" inputs as well as percentage or pixel sizes.
background-size:cover will make the smallest size fill the container with the remaining image "overflow" hidden.
background-size:contain will make the largest part of the image fill the container with a "letterbox" effect for any excess.
Then you can use background-position to define where that excess content get's cut or what part of the container is exposed.
body {
font-family: Arial, Helvetica, Sans-Serif;
}
img {
width: 250px;
}
hr {
margin: 20px 0;
}
div {
position: relative;
width: 300px;
height: 300px;
margin-bottom: 20px;
border: 1px solid #dadada;
background-image: url(https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
background-color: blue;
background-position: center center;
background-repeat: no-repeat;
}
span {
position: absolute;
bottom: 20px;
right: 20px;
color: white;
text-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}
.pos {
background-position: top left;
}
<img src="https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" />
<p>Image from Unsplash</p>
<hr />
<div class="cover">
<span>background-size:cover</span>
</div>
<div class="contain">
<span>background-size:contain</span>
</div>
<div class="cover pos">
<span>Cover + background-position: left top</span>
</div>
<div class="contain pos">
<span>Contain + background-position: left top</span>
</div>
if i'm right you are using .card-img-top
so add the class .card-person.card-img-top
My background image and its text are responsive to width resizing as long as the browser height is sized to the max. But when decreasing browser (such as Chrome) height the background image doesn't fit the whole window anymore. Any suggestions help!
#header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(/img/roses.jpg);
background-size: cover;
background-position: center center;
height: 100vh;
}
.name h1 {
font-family: 'Muli', sans-serif;
font-size: 500%;
font-weight: 300;
text-align: center;
padding-top: 10%;
}
.name p {
font-family: 'Play', sans-serif;
font-size: 150%;
text-align: center;
padding-top: 5%;
}
.navigation p {
display: inline;
}
.navigation {
text-align: center;
padding-top: 10%;
}
.contents:hover {
color: white;
text-decoration: none;
}
.contents {
color: whitesmoke;
text-decoration: none;
}
/* Media Queries */
#media (max-width: 33.9em) {
.name h1 {
font-size: 300%;
}
.name p {
font-size: 100%;
}
}
<section id="header">
<div class="container">
<div class="row">
<div class="col-xs-12 name">
<h1>Temple Naylor</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 name">
<p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world. <br>
NOW AVAILABLE FOR YOU</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 navigation hidden-md-down">
<p><a class="contents" href="#">ABOUT</a> / </p>
<p><a class="contents" href="#">WORK</a> / </p>
<p><a class="contents" href="#">CONTACT</a> / </p>
<p><a class="contents" href="#">PHOTOGRAPHY</a></p>
</div>
</div>
</div>
</section>
Close but a little off. You want background-size: cover
body {
background: url(http://www.hd-wallpapersdownload.com/script/bulk-upload/3d-wallpaper-rose-dowload.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
DEMO
UPDATE:
I was told the OP would like to keep text from scrolling as it shrunk, so here is a version of the text in VW opposed to PX so it becomes responsive as well.
DEMO with responsive text.
When you resize the window, #header is more than 100% of the browser height due the .container inside, therefore the scrolling.
To fix it, add
#header { overflow: hidden; }
body { margin: 0; }
or get the .container out of the #header
you may want to use background-size: 100%;
updated
remove height: 100vh; from header and this should fix the problem
see fiddle
you may want to add background-position: fixed if this suits you, fiddle
see this great tut https://css-tricks.com/perfect-full-page-background-image/
This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.
Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.
You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.
Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}
I pretty much see to have all the bugs figured out so far, besides one... the footer, again, isn't attached to the bottom. I had to remove the relative and absolute method because the content would stretch under the footer. So I need some sort of way to expand the area between the content and footer dynamically to keep the footer on the bottom. Is there a way this can be done? I have a "box-divider" set to 100% height, but it doesn't seem to do anything.
Live code here http://jordan.rave5.com/tmp/
CSS
#body {
transition: height 2s;
-webkit-transition: height 2s;
width: 74%;
min-width: 1024px;
height: auto !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #080908;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#body-content {
display: none;
height: 100%;
}
#box-divider {
width: 75%;
min-width: 1024px;
height: 100%;
margin: 20px auto 20px;
}
#footer {
width: 100%;
height: 150px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
padding: 0 0 20px;
}
HTML
<div id="background-overlay">
<div id="background-gradient">
<div id="header-image-grad">
<div id="header-container">
<div id="header">
<div id="navigation-container">
<div id="navigation">
<span id="nav">Navigation Area...</span>
</div>
</div>
</div>
</div>
<div id="header-image-border">
<img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
<div class="image-grad"></div>
</div>
</div>
<div id="body">
<div id="body-content"></div>
<div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
</div>
<div id="box-divider">
</div>
<div id="footer">
<br />
<div id="footer-content">
Footer Area...
</div>
</div>
</div>
</div>
One of the many versions out there... i use one in my designs
Sticky footer
This is what i do with my sites
html, body {height: 100%}
#wrap
{
min-height: 100%;
}
#footer
{
position: relative;
margin-top: -58px;
clear: both;
color: #333;
font-size: 10px;
text-align: center;
height: 85px;
background-image: url(../images/footerBG.jpg);
background-repeat: repeat-x;
}
the negative top margin is what does the trick...
HTML
<body>
<div id="wrap"><!--for sticky footer-->
<div id="headerWrapper"></div>
<div id="navWrapper"></div>
<div id="main">
<p>this is where your content fun crazy shenanigans will go</p>
</div><!--main or content-->
</div><!-- STICKY FOOTER -->
<div id="footer"></div>
</body>