Home/ Questions/Q 7688771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T20:00:01+00:00

I am trying to use JavaScript to set an elements width relative to their

  • 0

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: https://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: https://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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could try taking the left and right header divs out of the headerMain div and placing them at the same level in the DOM. Then use this modified CSS:

    #headerMain { height: 79px; background-image: url(../img/global/middleHeader.png); background-repeat: repeat-x; position:absolute; top:0px; left:63px; right:63px;} 

.headerLeft { width: 63px; height: 79px; background-image: url(../img/global/leftHeader.png); background-repeat: no-repeat; position:absolute; top:0px; left:0px;} 

.headerRight { width: 63px; height: 79px; background-image: url(../img/global/rightHeader.png); background-repeat: no-repeat; position:absolute; top:0px; right:0px;}
    • 0