Responsive Full Page Background Image CSS3 | XO PIXEL


Hey, Pixels! In this week’s tutorial, I’ll be showing you
how to code a responsive full page background image in CSS3. This responsive background image will fit
the entire width and height of your web browser, without any scrollbars. If you’ve ever wanted to really impact your
audience with your photography, or an image that you really want to showcase on your website,
this responsive full page background image that you can place on your website is just
the thing you need. Be sure to visit my blog, xopixel.com, to
see all the code and source files used in this tutorial. Now, let’s start coding! First, we’re going to write some really
simple code between the body tags All we’re going to do is create a div with
the class “text-container” Within the div, we’re going to use the h1
tag and write some text “go big or go home” I think this best represents this tutorial!” That’s it for the HTML, now let’s head
on over to our CSS file and apply some styles First, we’re going to apply the most important
lines of code in this tutorial. We’re going to select the entire page by
selecting the HTML tag Then, we’re going to grab our background
image using the background tag We’ll be using the no-repeat center and
fixed values to make sure the image doesn’t repeat, is always centered, and its position
doesn’t move on the page Then we’re just going declare some browser
support properties and then finally, we’re going to use the background-size: cover declaration
which is going to make our responsive full page background image
I wanted to add some big text to the image to make it ever more impactful. Let’s select the text-container and set
it’s width to 960px. I’m going to set it’s position to absolute
and then position it on the page so that it’s in the middle but also mostly to the left
of the page Lastly, I’m just going to style the h1 text. I’m using the Google font Roboto for the
heading text. I want it to be really big so I set its font
size to 156px. I also added some shadow to the text using
the text-shadow property and I used the text-transform: uppercase declaration so that the text will
always be in uppercase. So there you have it. You’ve just coded a responsive full page
background image using some cool CSS3 properties. Give this video a big thumbs up if you liked
it. Subscribe to XO PIXEL for more great coding
tutorials like this one. I’ll see you in next weeks video. Thanks for watching!

11 Comments

Add a Comment

Your email address will not be published. Required fields are marked *