Help needed with maintaining whole picture and text locations

HTML & CSS
,
1

Beginner HTML&CSS programmer here. I want to create a simple page with two lines of texts. I’m having two problems: Firstly the picture looks fine on my browser but when the browser is at full-screen, the picture gets chopped. Secondly, even though I’m using “em” for my element sizes and “relative” for locations, neither the positions nor the sizes of the texts are maintain wrt. to the picture.
I would really appreciate quick help, thank you very much in advance!

My HTML file:

<!DOCTYPE html>
    <html>
    <head>
    	<title>Pix</title>
    	<link rel="stylesheet" type="text/css" href="main.css"/>
    </head>
    <body>
    	<div class="foo">
    		<h1>Stay Tuned.</h1>
    		<h2>Coming Soon!</h2>
    	</div>
    </body>
    </html>

My CSS file:

body {
	font-family: Georgia, serif;
	height: 100%;
	margin: 0;
	text-align: center;
	width: 100%;
}

h1 {
	position: relative;
    left: -3em;
	color: red;
	font-size: 4em; 
}

h2 {
	position: relative;
    left: -4em;
	color: white;
	font-size: 3em;
}

.foo {
	background-image: url('clock.jpg');
	background-position: center top;
	background-size: cover;
	padding: 15rem 0;
	margin: 0px;
	text-shadow: 0 2px #000000;
	font-family: 'Trebuchet MS', 'Helvetica';
	font-size: 1em;

}
2

Hi @alex_turalyon, welcome to SitePoint forums. It would help us to read your code if you formatted it. Edit your post and either highlight the code and select the </> icon or place three backticks (```) on the line before the code and three backticks on the line after the code. Do the same to your html code when you post it also.

2 Likes
3

Thanks for the warning, hope it reads better now.

4

That is because you have the property background-size: cover it will expand the image to ‘cover’ the whole element. As the screen aspect, and therefore the element aspect alters, cropping will occur.
If you want the whole of the picture to be visible use background-size: contain that will shrink the image to fit within the element and maintain its aspect.

I’m not entirely sure what it is you want to achieve here. Is it that you want the text to appear “nailed on” to a location on the image at any screen size? For that you would need to constrain the aspect ratio of the container and use absolute positions for the text with % values.
But be aware that using this kind of positioning is not conducive to RWD and should be used sparingly and with caution. It’s best to keep things fluid and in the natural flow.
However if you could explain clearly what your objective is here, that would help.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.