Background Image and blog content

thebuddingdesigner · Member · Oct 4, 2011 at 3:06 am
Copy link

Add topic to favorites
Hi all,

I was wondering, is there a way, through CSS, to use a background image, but have a fixed white field the width of my content. Basically, I’d like to add some interest to my back ground but I’d like for it not to interfere with anything on the blog from the header all the way down. Any advice would be greatly appreciated! THanks!

The blog I need help with is: (visible only to logged in users)
micahcooksey · Member · Oct 4, 2011 at 3:31 am
Copy link
Yes. You’ll need the Custom Design upgrade, though.

Use the following CSS:

.middle {
background: #FFFFFF;
}

and do the same for your #header if you want it to be white as well.

Then, use the following CSS for your body tag:

background {
url(the-url-to-your-image);
}

.
micahcooksey · Member · Oct 4, 2011 at 3:33 am
Copy link
Sorry; the formatting got messed up there at the end. Use this for your body:

body { background: repeat url(the-url-to-your-image); }
thebuddingdesigner · Member · Oct 4, 2011 at 3:53 am
Copy link
perfect, that worked great! Is there any way to make the white space a bit wider than the content itself, giving the text and images some “breathing room”? and what about the space between the .middle and the header where the background shows through? …or am I now just getting too picky haha THanks again for your help!
thebuddingdesigner · Member · Oct 4, 2011 at 3:57 am
Copy link
Okay, I kinda figured out how to make it wider…”Width: _____px; but it only goes out to one side, not evenly in both directions. Thoughts? The other questions from above still apply aswell. THanks!!
thesacredpath · Member · Oct 4, 2011 at 4:03 am
Copy link
As an alternative, you might want to do the white background in .wrapper so that it runs the entire length of the site behind the header and clear down to the bottom of the footer.
```
.wrapper {
background: #FFFFFF;
width: 985px;
}
```
You will then probably want to add a bit of padding to the left of the content so it isn’t right up against the left side of the white area and also to the right of the sidebar.
```
#content {
padding-left: 20px;
}

.sidebar {
padding-right: 20px;
}
```
micahcooksey · Member · Oct 4, 2011 at 4:06 am
Copy link
For the side-to-side width, use:

padding: 0 10px;

For the space in between the header and content area, change this:

#header-image {
margin: -25px 0 15px;
}

to this:

#header-image {
margin: -25px 0 0;
height: 150px;
}

Does that answer all of your questions?
micahcooksey · Member · Oct 4, 2011 at 4:10 am
Copy link
Thanks thesacredpath, I think your suggestion is better, especially that of adding the padding to the content and sidebar areas separately. Otherwise, it breaks the layout.
thesacredpath · Member · Oct 4, 2011 at 4:32 am
Copy link
@micahcooksey, mine breaks too, which is why I widened the wrapper by 40px (20px padding each side).
thebuddingdesigner · Member · Oct 4, 2011 at 4:35 am
Copy link
Thanks guys! but when I do this it bumps the sidebar to the bottom, any thoughts? also, is there a way to have the white space in the header shorten a bit to show the background along the top of the page?
thebuddingdesigner · Member · Oct 4, 2011 at 4:40 am
Copy link
Nevermind, it’s perfect!

One last minute nit-picky things before I call it a day, promise!:

– Is there a way to add white space to the side of my header image on the left as it shows on the right? I think it looks off-balance the way it is showing now.

Thanks again for all you help, this has been very helpful and I have also learned alot about CSS!

THanks!
thebuddingdesigner · Member · Oct 4, 2011 at 4:57 am
Copy link
Oh…and the “wrapper” code seems to cover something else up…

hgroup {
background:url(‘http://thebuddingdesigner.files.wordpress.com/2011/10/tagline.jpg’) no-repeat;
}

it is an image with with a tagline text that I wanted to use instead of the automatic tagline. Anyway to bring this up above the white background of the “.wrapper” command? Thanks!
thesacredpath · Member · Oct 4, 2011 at 5:00 am
Copy link
Sorry, I should have caught that. Add this to your CSS.
```
#header-image img {
margin-left: 20px;
margin-right: 20px;
}
```
thesacredpath · Member · Oct 4, 2011 at 5:01 am
Copy link
Might want to put the 20px margin on the search box as well.
```
.search-form-holder {
margin-right: 20px;
}
```
thesacredpath · Member · Oct 4, 2011 at 5:07 am
Copy link
Where is, or was the hgroup image on the site?
thebuddingdesigner · Member · Oct 4, 2011 at 11:10 am
Copy link
the hgroup image was right above the page menu “home/About/Favorites List…”
thesacredpath · Member · Oct 4, 2011 at 5:44 pm
Copy link
Ah, I figured it out. When you hid the standard title using display: none; (#header h1 a) it caused the image in hgroup to go with it.

Find #header h1 a in your CSS and remove the “display: none;” and put this in instead.

margin-left: -999px;

That just moves the standard site title way off out of sight to the left.
thebuddingdesigner · Member · Oct 4, 2011 at 10:11 pm
Copy link
That allowed it to display, but now you an see that header that I was hiding on the left…do I just make the margin bigger? Thanks!
thesacredpath · Member · Oct 4, 2011 at 10:46 pm
Copy link
I’m not seeing any image in Firefox, Safari or in Opera. Where is it showing? Can you take a screen shot of it, upload it to your media library and then post a link to it here?
timethief · Member · Oct 4, 2011 at 11:18 pm
Copy link
@TSP
Using Firefox 7.0.1 I see > http://thebuddingdesigner.files.wordpress.com/2011/10/header-oct7.jpg

No items found.