Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Sahan Balasuriya
Sahan Balasuriya
10,115 Points

HTML and CSS help

I want my background image to take up the whole web page but it should readjust to the size of the browser window so there wouldnt be any scrolling and i want to add text that would be in the exact middle of the page

6 Answers

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Hi Sahan!

I'm basically a beginner but I have some ideas that may help you.

body {
  background-image: insert image link here;
  background-repeat: none;
  background-size: cover;
}

Hope this helps.

Sahan Balasuriya
Sahan Balasuriya
10,115 Points

the background worked thanks

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Oh! As for your text alignment issue, just use...

example {
  text-align: center;
}
Sahan Balasuriya
Sahan Balasuriya
10,115 Points

this didnt seem to fix the issue the text is horizontally in the middle but not vertically

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Glad you got the background working. Can you post your code on here so I can get a better idea of what you're trying to center?

Sahan Balasuriya
Sahan Balasuriya
10,115 Points 
/* fonts */
html, body {
               width: 100%;
               height: 100%;
               margin: 0;
               padding: 0;
            }

html {
    hight: 100%;
    width: 100;
    }   
p {
 font-color: red;
 font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
 font-size: 30px;
}

body {
background-color: #000000;
    }

.img.bg {
     /* Set rules to fill background */
  min-width: 1024px;
  background-size:cover;
  background-repeat:no-repeat;
}

.wraptocenter {
    text-align: center;
}

/* clearfix styles */

.group:before,
.group:after {
  display: table;
  content: "";
}
.group:after {
  clear: both;
}

the class wraptocentre is the text and it is in <p> in the html file and the the class img.bg is the background image

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

This may have nothing to do with the issue but I noticed you misspelled "height" within your html selector. Could you post the html code that contains the class wraptocenter?

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

Try adding this...

.wraptocenter {
  text-align: center;
  vertical-align: middle;
}
Sahan Balasuriya
Sahan Balasuriya
10,115 Points 
<p class="wraptocenter"> You gotta break a few eggs to make some omelettes </p>

i added vertical-align and it did nothing

Terrance Corley
Terrance Corley
11,990 Points
Terrance Corley
Terrance Corley
11,990 Points

I'm actually not quite sure then. Found this online though. Perhaps your answer is in this forum. http://stackoverflow.com/questions/10707253/css-full-screen-div-with-text-in-the-middle