bryonb0ru

If you want to use a background image in the main body and want the text to remain visible you need to change the transparency of the image to about 30% and then save it as a transparent image (PNG). Your base colors will fill the screen and you will still see the background.

If you want to add a image to the header background you can do it by adding custom CSS. As you will see I created a different size image so that it will scale correctly on all displays without cropping.

#site-header {
background-image: url(images/volktoberfest-header-415.jpg);
}

@media (min-width: 700px) {
#site-header {
background-image: url(images/volktoberfest-header-812.jpg);
}

@media (min-width: 1024px) {
#site-header {
background-image: url(images/volktoberfest-header-1024.jpg);
}
}

@media (min-width: 1220px) {
#site-header {
background-image: url(images/volktoberfest-header-1220.jpg);
}