CSS 2 div repeat and one div in middle

Question

I'm working with my project. I want 3 divs to be in one line and fixed position..

First div is repeated x
2nd div is in middle
Last div is repeated x.

I want my output to be like this: enter image description here

<div class="header-fixed">
    <div class="header-bg1"></div>
    <div class="header-logo"></div>
    <div class="header-bg2"></div>
</div>

CSS

.header-fixed{
position: fixed;
top: 0;
width: 100%;
}
.header-bg1{
background:url('images/header-bg1.png') repeat-x;
height: 88px;
left: 469px;
display: block;
}
.header-bg2{
background:url('images/header-bg2.png') repeat-x;
height: 128px;
left: 469px;
display: block;
}
.header-logo{
background:url('images/header-logo.png') no-repeat;
width: 469px;
height: 128px;
}

Note: You can use CSS gradient to achieve this. Also, to make `div` in one line, you must `float` them, or use `inline-block`. — Vucko, Oct 13 '14 at 11:39
You may need to apply a width to each of the divs that don't contain the logo. Additionally a float or display: inline-block would force them all on to one line. I can't help but think this is over complicating things though, cant you have a single image for the background and then position your logo correctly? — Mauro, Oct 13 '14 at 11:44

score 0 · Answer 1 · answered Oct 13 '14 at 11:45

0

add below to your css:

.header-fixed div {
  float: left;
  clear: none;
}

then in the HTML call it as:

<div class="header-fixed">
  <div class="header-bg1"></div>
  <div class="header-logo"></div>
  <div class="header-bg2"></div>
</div>

try and see !

answered Oct 13 '14 at 11:45

Nomesh DeSilva

1,649
4
25
43

I think your answer is not displayed as wanted – Goos van den Bekerom Oct 13 '14 at 11:47

score 0 · Answer 2 · edited May 23 '17 at 12:27

Using display: inline-block you can do:

Add that style to child divs:

.header-fixed>div{
    display:inline-block;
    vertical-align: top;
}

Remove whitespace between those divs. Note the commented HTML in the fiddle.

add some width to the first and third child div like:

.header-bg1, .header-bg2{
    width: calc((100% - 469px)/2);
    /* 100% of parent width minus the logo width divided */
    /* with 2 will put the same width for the first and third child */
    /* and center the logo */
}

caniuse CSS calc()

JSFiddle

Note: I've added margin: 0 to the body to remove it's default margin.

misterManSam · Answer 3 · 2014-10-13T12:50:48.930

Here is a simple implementation with 2 lines of HTML and a small amount of simple CSS:

First background is a background image on the body
Logo is an image in the header.
Second background is on a pseudo element of the header which is positioned with position: absolute and left: (logo width) / top: 0;.

Tested and working Chrome, Firefox and IE 9 + (IE 8 and even IE 6 and 7 is possible with modification)

Example

Note: The default margin on the body has been removed to prevent a gap.

body {
  background: #D3BC00 url('http://i.imgur.com/tZR9xWD.png') repeat-x;
  margin: 0;
}
header {
  position: relative;
  background: #D3BC00;
  width: 500px;
  /* smallest size is logo width */
  margin: 0 auto;
}
header:before {
  content: '';
  display: block;
  height: 100%;
  background: #D3BC00 url('http://i.imgur.com/GkQQ4PF.png') repeat-x;
  position: absolute;
  width: 100%;
  top: 0;
  left: 469px;
  /* logo width */
}

<header>
  <img class="logo" src="http://i.imgur.com/m3EiiKN.png" />
</header>

CSS 2 div repeat and one div in middle

3 Answers3

Example