Фон html страницы

Главная » Видеоуроки » HTML+CSS » Фон html страницы
В данном видеоуроке мы разберем, как установить фон html страницы. Все это делается при помощи css. Кроме того, разберем ситуацию, как сделать фон адаптивным и какой лучше фон устанавливать на страницу.
В конце урока дал уважаемому слушателю домашнее задание, в котором предлагается поэкспериментировать с фоном при помощи javascript и jquery.

Код урока (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 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Pin It on Pinterest

Share This