Background Image Left and Right of Header

Community Forums Forums Design Tips and Tricks Background Image Left and Right of Header

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  Michael 1 year, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2891

    Michael
    Participant
    Post count: 37

    Greetings Again!

    New thread for my second issue.  My site is http://www.visibility911.org.

    I would like to set a repeating image so that the header continues on both the left and right side so that it’s not white in those areas.  I like the whitish background below the header and bg-top images but I don’t want the white to the left and right of the header.  I’ve tried to find these images and also examined the style sheet but no luck.

    Thank you!

    #2929

    SoZo
    Moderator
    Post count: 1573

    The white background is coming from the #header rule. I recommend installing the Firebug add on for Firefox or using Chrome’s Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules.

    In order to set a repeating image behind there you would need to add it as the background of #wrap.


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    • This reply was modified 1 year, 10 months ago by  SoZo.
    • This reply was modified 1 year, 10 months ago by  SoZo.
    #2982

    Michael
    Participant
    Post count: 37

    SoZo, Thanks for this awesome tip!  I always wondered WHY I could right click on some background images and tell what they are and others, no way.  The firefox add on will be very helpful!

    One quick question on constructing the code for this image…Do you recommend copying code from another part of the site that has a repeating background image and then adapting it to this situation and putting it in the #header rule?  I am pretty new to CSS but am getting better.

    Thanks again!

    #3315

    Michael
    Participant
    Post count: 37

    Thank you again SoZo!   I don’t know how to use it real good yet, but the FireBug add-on worked great.

    First thing I had to do was remove all the bad code I had put in that got me where I was.  Then, using this site from the Education Theme gallery,

    http://www.faithchristianacademy.net/

    I examined their code using FireBug because they had used the same theme and essentially done what I needed to do with their header.  Looking over their code, I discovered that they called the image in a #wrap just as you suggested, so I did exactly what they did and substituted my specific info-

    #wrap {
    background: url(“http://www.visibility911.org/wp-content/themes/education/images/black/header-bg.png”) repeat-x scroll center top transparent;
    margin: 0;
    padding: 0;

    }

    Bada bing….worked like a charm.  Thank you for guiding me, I definitely couldn’t have done it without your help!  Have a great day!

    Michael

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.