Background Image to start below header

thebuddingdesigner · Member · Oct 2, 2011 at 3:53 pm
Copy link

Add topic to favorites
Hi All,

Quick question: Is there a way for my to get my background image to start below my header? I’d like to have these stripes I made run alongside my scrolling content, but I want it to start in line with my first post and not the header.

As I have it now I put extra white space at the top of the image, but when it tiles you obviously have that white space repeated. I’d like just a constant stripe running the length of the page, but not all the way to the top.

Does that make any sense? Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 2, 2011 at 5:51 pm
Copy link
Yes, but there is a drawback. The background image is going to be positioned relative to the browser window itself. What that means is that the background will appear to shift up or down depending on whether someone is logged in (admin bar showing) or not. And actually it is not the background image that will shift, but the of the content.
thesacredpath · Member · Oct 2, 2011 at 5:53 pm
Copy link
I need coffee. Last sentence should end with “… but the content.”
thesacredpath · Member · Oct 2, 2011 at 6:16 pm
Copy link
If you wanted to try this and then look at things logged in and logged out, here would be the code.
```
body {
background: url("URL OF IMAGE") no-repeat 0 200px transparent;
}
```
Replace URL OF IMAGE between the double quotes with the image you upload to your media library and then play with the 200px value to position the background vertically. If you need the image to repeat you can change the “no-repeat” as follows
```
repeat (repeats in both the horizontal and vertical direction)
repeat-x (repeats in only the X direction (horizontally)
repeat-y (repeats in only the Y direction (vertically)
```
designsimply · Member · Oct 2, 2011 at 6:17 pm
Copy link
I think you could put a background image on a different element, like the .middle one in this case. Here’s a start to show what I mean. You should remove the background properties from the body tag first, and you may need to adjust some other things like your .footer custom CSS and I made the right sidebar smaller to fit the bar in so you’d need to re-insert right sidebar images to be 185px or smaller.
```
.middle {
    padding-bottom: 185px;
    background: url('http://thebuddingdesigner.files.wordpress.com/2011/10/background-octbstripessmall6.jpg') -93px repeat-y;
    padding-left: 60px;
}
.post-meta {
    width: 125px;
}
#content {
    width: 685px;
}
.sidebar {
    width: 185px;
}
.widget-body {
    width: 180px;
}
.footer {
    margin: 0 auto;
    text-align: center;
    width: 945px;
}
```
thebuddingdesigner · Member · Oct 2, 2011 at 7:54 pm
Copy link
Wow! Awesome, that is even better than what I had in mind myself! Thanks!

No items found.