Background image spreading into footer

arbsdesign · Member · Jun 30, 2017 at 11:38 am
Copy link

Add topic to favorites
Hi,

I have a background image as CSS on the content of my page (link below) but for some reason it is now bleeding into the footer as well. This was not the case a couple of days ago so Im not sure if its a theme update remaining the divs or something? the footer was just white as normal and the image only spanned across the div with content in.. any ideas?

https://arbsdesign.com/submit-a-brief/

Thanks!!

The blog I need help with is: (visible only to logged in users)
ladysawen · Member · Jun 30, 2017 at 5:17 pm
Copy link
Hi Arbsdesign,

I’m not sure whether there was a theme update or not but that could be the case.

To correct this you could simply add a white background color to the footer in your css code.

For example you could try this:
```
.widget-footer-top-area + .widget-footer-bottom-area {
    border-top: 0;
    background-color: white;
}
```
Hope this helps!
thesacredpath · Member · Jun 30, 2017 at 9:55 pm
Copy link
Hi @arbsdesign, I’ve looked back through the recent changesets for Shoreditch, and there is nothing that should have caused this, but in looking at the theme files, HTML and CSS, there was no color assigned to the footer widget area, what is showing on the other pages is the background color set for the main body.

Change the CSS selector for the 2294 page in your custom CSS from this
.page-id-2294 .site-content
to this and it will take care of the issue.
.page-id-2294 #primary
arbsdesign · Member · Jul 1, 2017 at 7:24 am
Copy link
@thesacredpath

Hi! That worked perfectly thank you! any idea how I would achieve this effect on another page but the full width background image would only show on the div I choose?

Thanks!
thesacredpath · Member · Jul 4, 2017 at 3:28 am
Copy link
It would depend on the div. Are you talking about a div you insert into the content of that page, or one within the theme? I’d need some more detail on which page and which div. Highly likely that it is doable.
arbsdesign · Member · Jul 4, 2017 at 8:28 pm
Copy link
@thesacredpath

for example .homesixicons on this page: http://www.arbsdesign.com
thesacredpath · Member · Jul 5, 2017 at 1:23 am
Copy link
You can modify the .homesixicons CSS rule something like this and adjust the color as desired. I added a bit of top padding to keep the text at the top from being flush up against the top edge of the color.
```
.homesixicons {
  float:left;
  width:16%;
  background-color: #ccc;
  padding-top: 10px;
}
```

No items found.