Я пытаюсь сделать сайт, используя фоновое изображение:
(CSS)
body {
text-align: center;
background-image: url("../img/clouds.jpg");
background-size: 100% 760%;
}
и у меня также есть в верхней части страницы это:
(HTML)
<div class="pageTitle">
<p>Title of Page basically</p>
</div>
(CSS)
.pageTitle {
font-size: 200%;
}
Когда я пытаюсь увеличить размер шрифта, фоновое изображение также увеличивается (похоже, оно увеличено).
Полагаю, это связано с использованием процентов, но даже при использовании записи em или px я все равно получаю тот же результат.
Как я могу увеличить pageTitle больше, не меняя размер моего фонового изображения?
То, что заставляет его работать, это изменение background-size: 100% 760%; на background-size: 100% 250%; (в моем случае), но, тем не менее, всякий раз, когда элемент изменяется, он нуждается в исправлении в целом.
Фрагмент кода:
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: 100% 250%;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>