今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小

先说一下开始的做法:

1.footer底部加background,并设置其大小

2.footer里面添加div,写内容

问题:内容总是在最上面,如果使用margin或者padding则要指定一个固定值,万一哪天换了背景岂不是要重新设置?

于是百度,然后结合自己的思考找到了解决办法:

 padding-top: 410px;
background: url('./img/footer.jpg') no-repeat center;
background-size: 100%;
background-position:top center;

原理,padding内部可以填充内容,比如背景图片,所以把footer的padding-top顶上去,就可以让背景图片也跟着上去了,当然还有background也要变成top,利用padding是透明的原理,实现了这个功能

小伙伴们,你们想到了吗

网页footer背景(stick footer布局)的更多相关文章

  1. css 中 stick footer 布局实现

    做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...

  2. stick footer布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

  3. 前端-带header和footer的双栏布局

    目标是实现如上图带header和footer的双栏布局,其中右侧sidebar是固定宽度,左侧content是自适应: https://www.zybuluo.com/dengzhirong/note ...

  4. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  5. stick footers布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

  6. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

  7. Stick footers布局总结

    一.Sticky footers解释 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如 ...

  8. css+div网页设计(二)--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  9. sharepoint 2010 页面添加footer方法 custom footer for sharepoint 2010 master page

    转:http://blog.csdn.net/chenxinxian/article/details/8720893 在sharepoint 2010的页面中,我们发现,没有页尾,如果我们需要给页面添 ...

随机推荐

  1. mysql之提示符

    MySQL常用的简单的命令: mysql> PROMPT \u@\h \d> PROMPT set to '\u@\h \d>' root (none)>USE test Da ...

  2. s3c6410开发板LED驱动程序设计详细…

    2 下面来看看tiny6410关于LED的原理图如图(1)所示: 图1    LED原理图 3 LED实例,代码如下所示:(代码摘自\光盘4\实验代码\3-3-1\src\main.c) main.c ...

  3. [iOS]通过xib定义Cell然后关联UICollectionView

    先新建一个View的xib,然后删掉自动生成的View,拖进一个UICollectionCell,再新建一个对应的UIView继承UICollectionCell类. OK,接下来该连outlet的就 ...

  4. ubuntu 14.04 安装压缩包版mysql

    既有环境: 1)下载MySQL Community Server 5.6.17 压缩版(mysql-5.6.17-linux-glibc2.5-x86_64.tar.gz) 2)安装目录: /opt/ ...

  5. 对get post请求的封装

    HttpUtil.java package com.dhc.task.wx.util; import java.io.BufferedReader; import java.io.IOExceptio ...

  6. Centos手动编译安装vim8

    系统:CentOs6.9 gcc版本:5.1.0 github上拉取vim工程之后,cd src,执行一下命令: $ ./configure $ sudo make gcc -c -I. -Iprot ...

  7. ajax请求参数中含有特殊字符"#"的问题 (另附上js编码解码的几种方法)

    使用ajax向后台提交的时候 由于参数中含有#  默认会被截断 只保留#之前的字符  json格式的字符串则不会被请求到后台的action 可以使用encodeURIComponent在前台进行编码, ...

  8. jQuery基础,选择器

    jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Less, ...

  9. Solidity string to uint

    oraclize result以string格式返回,solidity没有uint(string)这样的强制转换功能,如果要解析其中的数字,可以用oraclize提供的parseInt方法: prag ...

  10. JMS-消息中间件的应用02-安装ActiveMQ-来自慕课学习-新手学习

    What is ActiveMQ?       -----突然好想打英文,好奇怪 请看来自官网的介绍: Apache ActiveMQ ™ is the most popular and powerf ...