CODEWITHSUNDEEP
htmlcss
Ashkan Hovold
Ashkan Hovold

Reputation: 908

Repeat background image around centered header

I have a header with a fixed height and width centered on my page. From each edge of the header image I have taken small 1 px images that I wish to repeat on the remeining space of that width.

Anyway, my problem is that I can not get the small images to repeat around the header. I started by trying to repeat the background image right of the header, but instead that background jumps down to the next "row" and repeats itself there. When I added the left header bg image that one repeated on the entire "row" and the right header image goes under it.

Edit- Here it is at jsfiddle. hope it helps you understand my problem. http://jsfiddle.net/kEdGb/

Now here's the html:

<div id="HeaderContainer">
    <div id="HeaderLeft"></div>
    <div id="Header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>

            </ul>
        </div>
    </div>
    <div id="HeaderRight"></div>
</div>

And the css: 

#HeaderContainer {
    width: 100%;     
}

#Header
{
    background-image: url(images/header_image.png);
    background-repeat: no-repeat;
    background-color: #707173;
    height: 210px;
    width: 990px;
    max-width: 990px;
    margin: 0px auto;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    position: relative;
    border-top-style: solid;
    border-top-color: #707173;
    border-top-width: 1px;
    border-left-style: solid;
    border-left-color: #707173;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-color: #707173;
    border-right-width: 1px;
}

#HeaderLeft {
    background-image: url(images/headerLeft.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#HeaderRight {
    background-image: url(images/headerRight.png);
    background-repeat: repeat-x;
    position: absolute;
    height: 210px;
    width: 100%;
}

#Menu {
    max-width: 95%;
    position: absolute;
    bottom: 0px;
    left: 5%;
}

Doesnt work in any browser. What am I missing? :)

Upvotes: 1

Views: 1107

Answers (4)

Nitesh
Nitesh

Reputation: 15749

Just for curiosity sake, I have worked on your issue. Here is the fiddle.

The HTML:

<div id="HeaderContainer">
    <div id="HeaderLeft">&nbsp;</div>
    <div id="HeaderRight">&nbsp;</div>
    <div id="header">
        <div id="Menu">
            <ul class="tab">
                <li><a href="page.html">Link</a></li>
            </ul>
        </div>
    </div>   
</div>

The CSS:

#HeaderContainer {width: 100%; position:relative;}
#HeaderLeft {background: url("images/headerLeft.png") repeat-x top left; height: 210px; position:absolute; top:0%; left:0%; width:50%;}
#header {background: url("images/header_image.png") no-repeat 0 0 #707173; height: 210px; width: 990px; margin:0 auto; position:relative;}
#HeaderRight {background: url("images/headerRight.png") repeat-x top right; height: 210px; position:absolute; top:0%; right:0%; width:50%;}

I have taken a reference for some points from @Martin Turjak code.

Upvotes: 1

Vikram
Vikram

Reputation: 632

What I understood from your question is, you want to implement background-image on header corners only (similar to border-image). If so,

you can simply following steps:

  1. take element: parent and child
  2. Repeat background image in parent element and given padding according to image you want to visible.
  3. Assign different background color or image for inner element.

In this way background image of parent element works as border-image of header

Cheers, Vikram

Upvotes: 1

Martin Turjak
Martin Turjak

Reputation: 21224

You don't need extra div's for left and right. You can simply apply the background tile to the #HeaderContainer, and the overlapping #Header will cover it with its background =)

And for different images left and right, you just need to overlap the background from one side - say left, with another div.

Here is a DEMO.

Upvotes: 2

JordiVilaplana
JordiVilaplana

Reputation: 485

Have you tried to wrap the image URLs inside some quotation marks? Like background-image: url('images/headerLeft.png');

Upvotes: 1

Related Questions