Home >Web Front-end >HTML Tutorial >If the background image is smaller than the page height, the background image is fixed. How to write this style. _html/css_WEB-ITnose
If the background image is smaller than the page height, the background image is fixed. How to write this style. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:23:581252browse
The height of the background image is 1400 pixels, and the height of the web page is 1900 pixels. The background image is fixed when browsing to the third screen. How to write this? It’s not easy to describe. I don’t know if I can understand it.
Reply to discussion (solution)
Use jquery scroll() to detect whether browsing to the third screen, and then add a class to make background-position, fixed.
jQuery(window).scroll(function(){ if(jQuery(window).scrollTop() > 1399){ jQuery('html').addClass('scrolled'); }else{ jQuery('html').removeClass('scrolled'); }}); html { background:url(image.jpg); background-repeat: no-repeat; background-position: top left;}html.scrolled { background-attachment:fixed; background-position: bottom left;} It’s a stupid method. Please refer to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">*{padding:0; margin:0;}body{background:url(http://b.hiphotos.baidu.com/album/w%3D2048/sign=19d4e347c2fdfc03e578e4b8e0078694/83025aafa40f4bfb2ac58bed024f78f0f7361875.jpg) 50% 0 no-repeat;}body.over{background:url(http://b.hiphotos.baidu.com/album/w%3D2048/sign=19d4e347c2fdfc03e578e4b8e0078694/83025aafa40f4bfb2ac58bed024f78f0f7361875.jpg) 50% bottom no-repeat fixed;}.box{height:5000px;}</style></head><body><div class="box"></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ var winHeight=$(window).height(); var maxHeight=3355-winHeight; //3355为背景图片高度 $(window).scroll(function(){ if($(this).scrollTop()>maxHeight){ $("body").addClass("over"); }else{ $("body").removeClass("over"); } });});</script></body></html> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn