CODEWITHSUNDEEP
htmlcssbackgroundfullscreen
user2539784
user2539784

Reputation: 41

full screen background, single page website

I'm trying to build a very simple one page website. Here's a wireframe model:

I have a very large background graphic (1920 x 1080) and I would like it to cover the whole page and when the browser window is made smaller, I would like scrollbars to appear (or something similar; the point is that the bg resizes). The page will also have some header text and a logo in the middle and a button below it and some text under a line after that.

I have tried:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

But if I make the browser window too small, it shows up wrong. I experimented having the top most and bottom most text IN the background graphic but after resizing to a very small size the sides of the text get cut off.

Another thing that almost works is this:

body {
    padding: 0;
    margin: 0;
    background: #f8f7e5 url('../images/background.jpg') no-repeat center top;
    background-attachment:scroll;
    width: 100%;
}

But the text won't play nice with that.

So my question would be, what would be the best way to achieve what I'm trying to do?

Upvotes: 1

Views: 1703

Answers (2)

chloelonan
chloelonan

Reputation: 136

Here's an example of what I think you might be looking for. I used background-size:100% 100%; so it will distort your image when you resize your page if the image isn't large enough. But it does always cover the entire background. Hope this helps!

http://jsfiddle.net/JF9me/

Upvotes: 0

jme11
jme11

Reputation: 17397

I would use background-size: cover for my background-image. It is well supported except in IE8. I would also set my background-image in media-queries so that I could have one or more smaller images for smaller size resolutions and use the larger image only on the largest devices. This way a small mobile device doesn't need to download a giant 1920px x 1080px image.

Your media queries can also be used to set your text for different devices. For example, you could have 3 divs for the text at the top of the screen that are each set to a width of 33.33333% and floated left so that they sit side-by-side on a desktop size screen. On the smallest devices, such as a mobile phone that is in portrait mode though you could set each of those columns to be 100% so that they are one on top of each other.

It requires a little thoughtful planning before hand, but if you're having trouble, sit down with a pencil and a paper and make 3-5 mockups for how you want things to look at different screen sizes. It could be as simply as one for a mobile device, one for a tablet device and another for a desktop device. Build your css for the smallest device size and make that look reasonably good, then create a media query for the next largest category of screens and start adapting your css to fit those size devices, and then do the next.

Upvotes: 1

Related Questions