Search code examples
htmlcssbackground-imagefont-sizebackground-size

attribute 'font-size' alters the 'background-img' size as well

I am trying to make a site, using a background image: (CSS)

body {
    text-align: center;
    background-image: url("../img/clouds.jpg");
    background-size: 100% 760%;
}

and I also have on the top of the page this: (HTML)

<div class="pageTitle">
    <p>Title of Page basically</p>
</div>

(CSS)

.pageTitle {
    font-size: 200%;
}

When I try to make the font-size bigger, the background image grows as well (looks like it's zoomed in, basically).

I suppose this has to do with the usage of percentages, but even when using em notation or px I still get the same result. How can I make the pageTitle bigger without altering my background image's size?

What seems to make it work is altering the background-size: 100% 760%; to background-size: 100% 250%; (in my case), but still, whenever an element is altered it needs fixing as a whole.

Code Snippet: 

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>

Solution

  • without set the height of a body the precent of height of the background is as a height of a contant. so 760% background-height is text-height*7.6. it is why when you change the size of the image the size of the image grow too..
    what you can do is set

     html, body{
    height:100%;
    }

    and then it wil calculate precent of the whole page size (so in your case you will see only 1/7.6 of the height of the image).