Setting a background to HTML

[x3r0CZ]

Hello guys,

I have an issue with setting an background with full width and then setting a background of a wrapper.

Here’s an image of what I would like to achieve:
https://www.dropbox.com/s/90edi9gsf2pbiaa/band_website.jpg

I want the content (wrapper) area to have width of 960px and the background for the whole page to be 2000px. However, I have never programmed a layout like this, so I don’t know, how to do that. Can you please give me some tips what settings should I use in CSS for body and wrapper and how should I set HTML file for this?

PS: It might not be visible in the jpg file, but the opacity of the navigation bar is set to 0.7, so the picture behing it is slightly visible.

[CodeGraphics]

It’s pretty simple.

Your html just look like this:

Your css should look like this:

body{
background:url(yourImage.jpg)no-repeat center center fixed;
background-size:cover;
height:100%;
}

.wrapper{
width:960px;
margin:50px auto;
}

Here is a codepen: http://codepen.io/anon/full/mpHEa

Basically, you can make the body background-image to be something like 1500px/600px

[Author]

Posts