Author Options:

How makey "wrap around" bg/banner in blogger? Answered

I'm having a bit of trouble trying to figure out how to do an awesome background/header in Blogger that rolls beyond the width of the columns and doesn't get off-center/out-of-line with the blog content when the browser is resized.  You can see the problem here:  http://dangerplants.blogspot.com/

The blog isn't done or anything.  It's just an example of what happens the browser is resized, and it bothers me a lot.

I don't know if the column code needs to be adjust or the background code needs to be changed or what.  I'm not good at CSS, and I don't know JavaScript, which blogger allows.

I'm attaching a rough idea of what I'd like to be able to do.  Les sigh.



Best Answer 7 years ago

This looks like it might help:


Adding the "fixed" attribute ought to tell the image to stay still.

Unfortunately, I seem to only have the scroll/no-scroll option, and I need the image the scroll with the page which is something I neglected to mention.  I think the solution is setting scroll bars to appear when the browser is resized, but it's not as "simple" as that.

First, my advice from before is useless b/c you already have "fixed" as one of the attributes for the background image.

Your image has a "center" attribute which is why it's moving when you resize the window.  It keeps trying to center itself.  Also, I think the "fixed" attribute is keeping it from scrolling up and down with the rest of the content.

Does blogger let you edit the css files?  Wordpress doesn't in their free version but you can pay for the privilege.  If you are constrained to a few built-in options that come w/ blogger you may be screwed.  If you can edit css (or override the defaults) you have options.

I would try setting the image absolutely which is usually done by describing the position in css for the top left hand corner of the image. If you wanted the picture at the very top and 100 pixels from the left of the window it would look like:

body {
  background: url("link to your picture here");
  position: absolute;
  top: 0;
  left: 100px;

or you can float the image which means that if nothing is in it's way it will display to the left or right side of the screen or whatever containing element it is inside of. In your case I would try floating left and adding padding to the picture to position it which would look like:

body {
  background: url("link to your picture here");
  padding-left: 100px;
  float: left;

I am by no means a CSS pro. I just learn enough to get what I need done which means lots of stumbling around. It generally gets the job done w/ some perseverance.

FWIW- Like many people I use the firebug extension with firefox to figure out what's going on.  It lets you click on an element on your page and tells you what rules are being applied to it.  It takes a bit to get used to using it but is fantastic for troubleshooting.  I also refer to the sitepoint css & html reference constantly to refresh my memory on what tags/attributes to use.
Hope this helps...

I think I have it working by switching templates.  There were far too many variables defined in the other one that was making it quite impossible. 

Thank you for all the effort!  With the templates on blogger, it's sometimes not so simple as what you said.  There's a lot of mayhem.

I don't personally use blogger but would it be possible to have the black background as separate from the plant tray header image??? I mean if you simply crop your red tray with cactus and insert it as a header image aligning it to the right of the blog title... then it wouldn't move when your browser window is resized (as the background image does at present)... your background is the free to be centred if required, yet your cool header image will stay where it should be...

There is a good description of aligning your header image here

Les sigh.  The movement of the background in the example blog was just to show how the background stays center with the browser being resized, but the columns/meat-of-the-blog doesn't - you can see the cactus creeping into the blog title as the browser gets resized.  I can easily do a centered banner, but I can't expand it beyond the blog columns into the "background".

On this blog, you can see more of what I'd like to do:  http://superherocheesecake.com/

The background stays stuck where it's supposed to be no matter how the browser is resized.