Background Image for header …

[cjholbrook]

Hi,

I want a background image for my entire header/menu section. I'm on Infinity Pro. How can I do this?

Also, I want a background image for my entire footer area. How can I do this?

And I would like a background image on the sides of my body. Sort of like this: https://OuterLimitsLandSurveying.com. It has black around the main white copy.

The site I'm working on is AmyJanece.com

thanks so much for your help!!!!

Cindy

http://AmyJanece.com

[askdesign]

You need to add the "background-image" property to the .site-header, .site-footer, and .site-container classes.
You may also need to add the "background-position" and "height" properties.

ORIGINAL CODE

.site-header {
    background-color: #fff;
}

.site-footer {
    border-top: 1px solid #eee;
    line-height: 1;
    padding: 60px 0;
    text-align: center;
}

.site-container {
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    -ms-animation: fadein 1s;
    -o-animation: fadein 1s;
    animation: fadein 1s;
}

MODIFIED CODE

.site-header {
    background-color: #fff;
    background-image: url(https://www.xyz.com/imagepath/imgename.jpg);
    background-position: -480px;
    height: 258px;
}

.site-footer {
    border-top: 1px solid #eee;
    line-height: 1;
    padding: 60px 0;
    text-align: center;
    background-image: url(https://www.xyz.com/imagepath/imgename.jpg);
    background-position: -480px;
    height: 258px;
}

You'll add the background image to the .site-container class, which may make the .site-inner area difficult to see. So you'll need to add a white (or another color) background:

.site-container {
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    -ms-animation: fadein 1s;
    -o-animation: fadein 1s;
    animation: fadein 1s;
    background-image: url(https://www.xyz.com/imagepath/imgename.jpg);
    background-repeat:no-repeat;
}

.site-inner {
    clear: both;
    margin: 73px auto 0;
    max-width: 1280px;
    word-wrap: break-word;
    background-color: #fff; /* --- add this code --- */
}

---

Anne S. Katzeff
Designer | Artist | Teacher

[Author]

Posts