Menu
I am trying to use JavaScript to set an elements width relative to their screen resolution width. I'll explain a bit why... I have this image: http://i.stack.imgur.com/HeXvu.png
I want this to be my header, by I don't want it to be a fully static image, I want the header to scale with the screen resolution, so I set up my CSS and HTML something like this...
HMTL:
<html>
<body>
<div class="globalContainer">
<div id="headerMain">
<div class="headerLeft">
</div>
<div class="headerRight">
</div>
</div>
</div>
</body>
</html>
CSS:
#headerMain {
height: 79px;
background-image: url(../img/global/middleHeader.png);
background-repeat: repeat-x;
}
.headerLeft {
width: 63px;
height: 79px;
background-image: url(../img/global/leftHeader.png);
background-repeat: no-repeat;
float: left;
}
.headerRight {
width: 63px;
height: 79px;
background-image: url(../img/global/rightHeader.png);
background-repeat: no-repeat;
float: right;
}
Now, what I am trying to do here is, have predefined widths and heights for the left and right cured parts of the header, and use initial header div (with the middle image set as background). The only problem I have encountered here is this, the background of the main div (one with the middle part of the header), shows behind the image that is the right curve of the header, like this: http://i.stack.imgur.com/XEq85.png
How do I get around to doing this? One way I could think of was to use JavaScript. Here's what I was thinking, first the script fetches the users screen width using "screen.width," then subtract "63" from the value (the width of the right curved part of the header), and set that value as the main header element's width, which should theoretically fix the background issue. The only problem is, I have little to no JavaScript experience and don't know how to do anything, the only reason I know of the few things I do, is mostly because I have copy/pasted a few other JS codes in a few of my pages... Yeah. Pretty bad. So, what do I do? o_o
985
Here is a working example of what you are trying to achieve - http://jsfiddle.net/Tq33c/.
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
