CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
Samsquanch
Samsquanch

Reputation: 9146

Multiple background colors and images in full-width div

I'm trying to make a header for a site that has multiple background colors and images. On the left is a tan-ish gradient and a logo image, on the right is a sunburst/cloud image that fades to teal, as shown below.

header

The left (logo) portion should be 230px wide, and the right (sunburst) portion should be 770px wide, for a total of 1000px, and this should be centered. The left side tan gradient should extend to the left edge of the browser, and the teal should extend to the right edge.

I attempted to do it with percentages:

CSS:

#header {
  height: 105px;
  min-width: 1000px;
}
#header .left {
  width: 31%;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
  height: 105px;
  float: left;
}
#header .left #logo {
  float: right;
  width: 230px;
}
#header .right {
  width: 69%;
  background: url(../images/header-right.png) bottom left no-repeat #009eb0;
  height: 105px;
  float: left;
}

HTML:

  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>

This almost worked, but the header didn't stay centered with wide browsers.

Fiddle

Upvotes: 2

Views: 1223

Answers (3)

Samsquanch
Samsquanch

Reputation: 9146

I ended up solving this in a bit of a hacky way. First, I added a container around the header like @Raad suggested, then added two more divs inside to hold my colors:

<div id="header-wrap">
  <div id="filler-left">
  </div>
  <div id="filler-right">
  </div>
  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>
</div>

Then the CSS:

#header-wrap {
  width: 100%;
  position: relative;
}
#header-wrap #filler-left {
  left: 0;
  width: 50%;
  position: absolute;
  height: 105px;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
}
#header-wrap #filler-right {
  left: 50%;
  width: 50%;
  position: absolute;
  height: 105px;
  background: #009eb0;
}
#header {
  height: 105px;
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

and set my .left and .right divs to fixed width. Worked out pretty well. Not my ideal solution, but it worked.

Upvotes: 0

omid
omid

Reputation: 772

set header margin & width: 

#header {
    height: 105px;
    margin: 0 auto;
    min-width: 1000px;
    width: 100%;
}


#header .left {
    background: none repeat scroll 0 0 #FF00FF;
    float: right;
    height: 105px;
    width: 31%;
}


#header .right {
    background: url("../images/header-right.png") no-repeat scroll 0 0 #009EB0;
    float: left;
    height: 105px;
    width: 69%;
}

this is worked for me.

Upvotes: 3

Raad
Raad

Reputation: 4648

A bit hacky, but this should do the trick:

body {
    text-align: center;
}

#header {
    display: inline-block;
    height: 105px;
    margin-left: auto;
    margin-right: auto;
    min-width: 1000px;
    text-align: left;
}

you could use a wrapper div to apply the text-align to instead of the body, but I posted this in case you don't want to change the structure.

Upvotes: 0

Related Questions