Inserting a banner image into the footer.

lindseyashmore1 · Member · Apr 10, 2015 at 3:33 pm
Copy link

Add topic to favorites
I am trying to insert a banner image into my footer but it will not span the full length. The image is large enough that it has the capability to do so. Below in the current coding for my footer. My page is private because we are not ready to publish. The visual effect I want is similar to the footer at http://www.ksu.edu. I have created our own banner artwork image though.

#supplementary {
padding: 0 10px;
}

.site-footer,
.site-info,
.site-info a {
color: rgba(255, 255, 255, 0.7);
}

.site-footer {
background-color: #000;
font-size: 12px;
position: relative;
z-index: 3;
}

.footer-sidebar {
padding-top: 48px;
}

.site-info {
padding: 15px 10px;
}

#supplementary + .site-info {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-info a:hover {
color: #41a62a;
}

The blog I need help with is jstacklab.com.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 11, 2015 at 4:31 pm
Copy link
Hmmm, we could do a background image in the body, but you already have a custom background image inserted there that appears at the top, and we can’t really do two.

There are some tricks that can be used with pseudo selectors, but I can’t really come up with a clean way of doing this on Twenty Fourteen.

If you don’t need the existing background image you have set for the body, we could add the bottom image in and position it at the bottom.

Let me know your thoughts.
lindseyashmore1 · Member · Apr 27, 2015 at 4:39 pm
Copy link
thesacredpath- Sorry I have been away for a while. I do not need the current background image that you see.
thesacredpath · Member · Apr 28, 2015 at 7:31 pm
Copy link
You know, we can insert the image into the .site-footer div as a background and it spans the full width of the bottom area, unless you are wanting to to span the full width of the browser window. Is that what you are wanting?
lindseyashmore1 · Member · May 1, 2015 at 3:24 pm
Copy link
I would like it to span the full width of the browser window. I think it will pull the site together.

Thank you very much for the additional help. I am new to this as a communication student.
thesacredpath · Member · May 11, 2015 at 10:17 pm
Copy link
You know, I can’t get this to work cleanly on Twenty Fourteen due to the way the HTML and CSS are structured.
lindseyashmore1 · Member · May 12, 2015 at 4:33 am
Copy link
Would it work a easier if it just spanned the middle column instead of the whole page width? I noticed in wordpress.org a “false footer” was used, but I don’t think I have the same level of access with wordpress.com versus .org. I feel like the structure of the 2014 CSS is a little funny across the board, but I am new to this so it could be a learning curve for me.
thesacredpath · Member · May 12, 2015 at 2:10 pm
Copy link
We can span the footer area with the following (I pulled a photo from your media library for a placeholder).
```
.site-footer {
    background: url('https://jstacklab.files.wordpress.com/2015/04/cropped-websiteheader2-pixel-based.jpg') no-repeat scroll 0 0 / cover transparent;
}
.site-info, .site-info a {
    color: #fff;
}
```
You might also give the following a try in addition to the above, which sets a grey color for the body background. It gives a nice boundary on the right side instead of the large white area.
```
body.custom-background {
    background-color: #eaeaea;
    background-image: none;
}
```
Or, we could center the content area in the browser window with the following instead of the body background stuff if you would prefer white on the right although this sort of makes things look a little strange on the right with a white background to body. If you go with centering the content, and use the above, try setting the background color to #f5f5f5, which is a very light grey and seems to frame things nicely.
```
#page {
    float: none;
    margin-right: auto;
    margin-left: auto;
}
```
Mix and match and see what you think.
lindseyashmore1 · Member · May 12, 2015 at 2:18 pm
Copy link
Thank you so much! I will play with these a little bit later today and see how they look. You are awesome!
thesacredpath · Member · May 12, 2015 at 2:48 pm
Copy link
You are welcome and thanks.

No items found.