Skip to main content
tomtomthepipersson
Participant
Jan 11, 2020 7:21 AM UTC
Answered

CSS Code Help

I have just started something and I cannot resolve an issue. So far I have just one page plus a css file.
The page had a full screen image as a background, this works find in 'standard' screen maode and 'full' screen mode, but if I reduce the screen with the 'reduce down' button, the top of the background image appears at the bottom of the page.

For some reason I don't seem to be able to upload the code to this post, so I;ve saved it as an image.

This topic is closed to new replies. Start a new post to keep the conversation going.
Nancy OShea
Nancy OSheaCorrect answer
Community Expert
Jan 11, 2020 7:25 PM UTC

Thanks for that.

I did put in a Height of 800px and that seemed to resolve it, I don't know if it worked across all browsers.

But I did try what you suggested removing the 'height' and found in 'reduce down' mode, there was a white line below the bottom of the screen.

So I kept what you suggested and added the 'height' again at 800px

 

As I say, it seems to be OK, it not a commercial site, just something for my family, so not hugely important, but it bugs me when I don't understand something and can't work it out.


We don't use absolute positioning for vertical centering anymore.  With CSS Grids, there's less code and none of the consequences that come from positioning elements absolutely.

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids - vertical centering</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
main {
padding: 2%;
width: 80%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
}
</style>
</head>
<body>
<main>
<h3>Welcome to CSS Grids!</h3>
<p>I'm vertically &amp; horizontally centered.</p>
</main>
</body>
</html>

 

Give it a try 🙂

 

Nancy O'Shea— Product User & Community Expert
View reply

7 replies

tomtomthepiperssonAuthor
Participant
Jan 11, 2020 8:00 AM UTC

I think I've solved this, I have set a background height.

Translate
osgood_
Legend
Jan 11, 2020 9:02 AM UTC

Correct way is to add to the body css:

 

repeat: no-repeat;

Translate
tomtomthepiperssonAuthor
Participant
Jan 11, 2020 9:55 AM UTC

Thanks for that.

I did put in a Height of 800px and that seemed to resolve it, I don't know if it worked across all browsers.

But I did try what you suggested removing the 'height' and found in 'reduce down' mode, there was a white line below the bottom of the screen.

So I kept what you suggested and added the 'height' again at 800px

 

As I say, it seems to be OK, it not a commercial site, just something for my family, so not hugely important, but it bugs me when I don't understand something and can't work it out.

Translate
tomtomthepiperssonAuthor
Participant
Jan 11, 2020 7:24 AM UTC

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices