Background Image Position within Header Container. (Wordpress Thesis)

Discussion in 'CSS' started by Lazycoderuk, Jul 17, 2012.

0
  1. #1
    Right. What I am trying to do is apply some padding or a margin within a Header Container.

    I am trying to do this so my header background image at 150px x 270px has 4em padding from the left.

    Here is my current CSS custom code which I have applied onto the Thesis Theme inside Wordpress.

    .custom .menu {
    padding-left: 4em; padding-right: 4em;
    background-color: #000000;
    }


    #header {
    border: 0;
    background-image: url(image);
    background-repeat: no-repeat;
    height: 150px;
    padding: 0;
    position: relative;
    }


    .custom #header #logo a {
    text-indent: -9999px;
    width: 270px;
    height: 150px;
    display: block;
    float: left;
    }

    I am currently a big newbe to CSS so all help is appreciated.
     
    Lazycoderuk, Jul 17, 2012 IP
  2. AtomicPages

    AtomicPages Peon

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hello there! One thing I would do is learn how to use single-name selectors. For example:

    #header {
    border: 0; /* this is bad, use none */
    background-image: url(image);
    background-repeat: no-repeat;
    height: 150px;
    padding: 0;
    position: relative;
    }

    Can be simplified to:
    #header {
    border: none;
    background: transparent url('image.jpg') no-repeat;
    height: 150px;
    padding: 0;
    position: relative;
    }

    Also, in order to actually get what you want what I would do, in order to simplify my life, is to add an inner element to the header so you can add padding without affecting the overall width and/or height to #header.

    <div id="header">
    <div id="header-inner"></div>
    </div>

    You could then do:
    #header-inner { padding-left: 4em; }
    That should add 4em of left padding to the #header-inner element and should produce the results you desire if I'm understanding you correctly.

    It seems like you actually want to move the logo 4em to the left rather than the header image. You might want to keep the header and logo separate.

    http://www.w3.org/TR/CSS2/colors.html#propdef-background
    That should contain information regarding the background property and should help you understand things better.
     
    AtomicPages, Jul 18, 2012 IP
  3. dlb

    dlb Member

    Messages:
    203
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #3
    dlb, Jul 19, 2012 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    dlb has it right, background-position is all that's needed there -- and since the default value for a DIV is transparent, you don't need to restate that either.

    background: url('image.jpg') 4em 0 no-repeat;

    Though I question all these DIV for nothing -- I'd have to see the actual images involved, but I suspect you're building from non-semantic markup and failing to provide images off graceful degradation.
     
    deathshadow, Jul 19, 2012 IP