Background Image

alexiaconley · Member · Aug 7, 2013 at 6:03 pm
Copy link

Add topic to favorites
Hey! I am very new to the whole CSS process (no idea if what I have been doing is even right). I really want my custom uploaded background image to fill the border and extend above the header. Any way to do this using CSS?

Also, how can I right align the follow widget on the footer/ make that area look cleaner (no grey lines and less spacing)

So many questions, but any help would be greatly appreciated

The blog I need help with is: (visible only to logged in users)
alexiaconley · Member · Aug 7, 2013 at 6:04 pm
Copy link
sorry blog I need help with is http://www.theconfetticollection.com
thesacredpath · Member · Aug 7, 2013 at 7:24 pm
Copy link
You can use the following Custom CSS rule. It will scale the background image so that it will always cover the background area. Narrow and widen your browser window to see the results. The spacing between the lines will get narrower with narrower browser windows.
```
body.custom-background {
background-size: cover;
}
```
alexiaconley · Member · Aug 7, 2013 at 8:14 pm
Copy link
Thank you! Any suggestions for right aligning the follow widget and getting rid of grey footer lines? would love to decrease the size of the write in box on follow widget as well.
thesacredpath · Member · Aug 7, 2013 at 9:15 pm
Copy link
For your follow widget, replace the code you have in your text widget with the following. I added “class=”alignright” and a touch of right margin in the image code to align it with the search widget.

<a href="http://www.bloglovin.com/en/blog/8435887" title="Follow alexiaconley on Bloglovin"><img border="0" src="http://www.bloglovin.com/widget/bilder/en/widget.gif?id=8435887" alt="Follow on Bloglovin" style="margin-right: 15px;" class="alignright"></a>

Are you talking about the grey border line on the footer at the very bottom of your site? If so, add the following to get rid of that border line:
```
#colophon {
border: none;
}
```
If you are talking about the border lines around the share buttons and like button, add the following:
```
.entry-content div.sharedaddy div.sd-block {
    border: none;
}
```
…decrease the size of the write in box on follow widget as well.

Can you tell me which follow widget you are talking about? I see only the recent posts, search and bloglovin’ widgets.
alexiaconley · Member · Aug 7, 2013 at 9:59 pm
Copy link
I am sorry! Guess I wasn’t clear this question was for theconfetticollection.com (too many domains). The widget in question is the like what you see? follow email subscription widget in the bottom left hand corner footer. I want it to be right aligned and maybe closer to the bottom of the white footer area (as in closer to the stripes)
thesacredpath · Member · Aug 7, 2013 at 10:17 pm
Copy link
Ah the widget is defaulting to a 100% width when there are no other widgets in the footer. You can add the following to limit the width of the follow/subscribe widget. I’ve targeted that widget specifically by widget ID # (2). You can adjust the % width value as you desire. The second rule gets rid of the grey border line above that widget.
```
#blog_subscription-2 {
width: 30%;
}

#supplementary .widget {
border: none;
}
```

No items found.