HTML web page background

Home » Tutorials » HTML and CSS » HTML web page background
In this lesson we’ll consider how to set background to web page. Also you will know, how to make responsive background.
In the end of lesson I offered homework to you. I would like you will make some experiments with background image and use for it javascript and jquery
Code lesson (HTML)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			background: url(cork.png);
		}

		#content {
			font-size: 50px;
		}
	</style>
</head>
<body>
	

<div id="content">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati sequi voluptate deserunt commodi, cum recusandae quod dolor fugiat perspiciatis fugit molestias. Atque nostrum, voluptates eaque sunt veritatis alias dolorum obcaecati!
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sequi doloremque repellendus, odit quas, nemo consequuntur quis dolorum tempora fugit iusto. Saepe doloribus pariatur vitae in, officia ipsam voluptates nobis.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et veniam ex, placeat tenetur ab laudantium cum illum. Accusantium vitae reiciendis impedit enim, dolore. Atque cumque, facilis eius libero reprehenderit, impedit.
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae dolor, ea! Officiis nostrum reprehenderit necessitatibus veniam suscipit? Ratione veritatis magni quam consectetur, tempore nesciunt dolores. Cum omnis pariatur dolore doloremque!
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae at iure quasi, nobis ipsam excepturi magni. Voluptatem explicabo laborum sequi. Maiores tempore deserunt voluptatum et ipsam praesentium sint cumque ratione?
</div>


<!-- 
	С помощью javascript (и jquery) менять фон при клике на кнопку (2 кнопки)
		- 1-ая кнопка устанавливает один фон
		- 2-ая кнопка второй
		abzalov90@gmail.com
-->


</body>
</html>

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This