If the background image is smaller than the page height, the background image is fixed. How to write this style. _html/css

If the background image is smaller than the page height, the background image is fixed. How to write this style. _html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:23:58

Original

1215 people have browsed it

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');    }});

Copy after login

html {    background:url(image.jpg);    background-repeat: no-repeat;    background-position: top left;}html.scrolled {    background-attachment:fixed;    background-position: bottom left;}

Copy after login

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>

Copy after login