CODEWITHSUNDEEP
cssheader
Abie Giordano
Abie Giordano

Reputation: 371

resize header image to fit the browser automatically

so here I have a header image like below

enter image description here

i planned to make stretch the header image to 100% for the monitor resolution, what's the best practice and way to achieve this? i've tried to do this:

.LippoHeader
{
background-image: url('../images/body/headerpng_BG.png');
background-repeat: repeat-x;
width: 100%;
height: 170px;
}
.shadowone
{
width: 100%;
position: absolute;
left: -1px;
top: 172px;
display: inline-block;
}
.shadowtwo
{
width: 100%;
position: absolute;
left: -1px;
top: 173px;
display: inline-block;
}
.shadowthree
{
width: 100%;
position: absolute;
left: -1px;
top: 176px;
display: inline-block;
}

it still can't stretch to 100% fit into monitor (it only stretch as the image resolution itself allow) unless i add:

position: absolute;

is there anyway to do this? if possible i wouldn't want to add that, i was told to not set the position to absolute, because it's a bad practice

here's the screen capture of the header: enter image description here

also i used master page, so no body tag, only div tag, i used .ascx for my panel header, my code is 

<div class="LippoHeader">
  <div>
    <img src="images/body/shadow.png" class="shadowone" />
    <img src="images/body/shadow.png" class="shadowtwo" />
    <img src="images/body/shadow.png" class="shadowthree" />
  </div>
</div>

Upvotes: 0

Views: 5048

Answers (2)

hungerstar
hungerstar

Reputation: 21675

Since you want to repeat an image and have a div take up the whole width of the browser window and not an actual individual image you will want to make sure there is no margin on the html or body tags. Looking at the supplied jsFiddle you will want to remove the margin.

html,
body {
     margin: 0;
}

Upvotes: 1

Renato
Renato

Reputation: 983

From what I understand, you want to stretch the header, not the image itself; the image is being repeated horizontally.

I treated LippoHeader as a div and it worked with no problems in this jsFiddle. However, it doesn't take 100% of the monitor's width, but 100% of its parent's width (in this example, body). Was this your goal?

Upvotes: 3

Related Questions