CSS How to make image fluid extending only to one side of browser, center aligned?

HTML & CSS
1

I currently don’t have code to show as an example because I been trying to make this work but not even coming close to making it work as expected. I can’t show the images because of an NDA. So will describe the best I can.

Basically:

  1. I have a logo image inside of a div. The div has margin:0 auto; so it is centered in the browser.

  2. I have a “Arrow” png image with transparent background that needs to be flushed against the right side of the browser.

  3. The catch is, No matter how wide you make the browser window, I need the arrow tip to stay next to right side of the logo with the tail of the arrow still being flushed against the right side of the browser.
  4. The content of the page will be centered as well. Just in case this info was needed.

Basically I need the arrow to resize to the browser width, but make sure the arrow tip is always pointing at the logo. All my attempts makes the div too big, causing the logo to just be flushed all the way to the left and not centered.

I understanding that may consist of the arrow being sliced into two images, but even then I am still confused on to how I can make this actually work. Starting to think it isn’t something that is possible.

Here is an image to explain, I am sure once I figure out how to do the top arrow arrow I can get the bottom arrow. The bottom arrow is slightly different because the arrow tip may be at different places depending on the page.

Update:
Someone provided a solution which might work, but the arrow bleeds below the transparent logo png when the browser width is made too small. I am posting below, but if anyone might know of code improvements or a different method then I am all open.


<div class="main">
  <div class="header"></div>
  <div class="arrow_container">
    <div class="arrow">&larr;&dash;&dash;</div>
  </div>
</div>



.main{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.header{
    position: relative;
    opacity: 0.5;
    z-index: 10;
    width : 400px;
    height: 100px;
    margin: 0 auto;
    background: #ccc;
}

.arrow_container {
    z-index: 5;
    background: #88b7d5;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 10px;
    padding: 10px 0 10px 200px;     
}

.arrow{
    padding: 10px;
    background: #eee;
    font-size: 32px;
}
2

My approach to this would probably be with background images. Two big wide ones, each with an arrow on it. I’d make each arrow very long (like 2000px) but make the image twice as long and probably transparent. As an example of what I mean, for the bottom arrow I’d place the arrow on the left half of the image, and then center the background image on the screen (in a 100% wide div). That way, the arrow tip will always be centered. If you, say, wanted that arrow tip always 40px left of center, then move it 40px left of the center in the image itself. (So, for the arrow next to the logo, move the arrow tip slightly right of center of the image.)

3

Hey Ralph,

Thanks for taking the time to reply :). I managed to achieve the effect I was looking for, before I had a chance to read this reply. However you did give me some ideas for other things I wanted to try.

I was able to achieve the effect based on the advice given to me on the other site and some modifications I had to find with trial and error. Here is the code below in case it might help someone in the future. I only tested it on chrome, firefox and safari, all recent versions as of this post. Not sure what issues I will run into with other versions or IE.

HTML

<div class="header-wrapper">
     
      <div class="header">
       <img src="images/logo.png" />
      </div>
      <div class="arrow-wrapper">
       <div class="arrow-tail"></div>
      </div>
     </div>

Css

    .header-wrapper{
        position:relative;
        width:100%;
        overflow:hidden;
    }
    
    .header {
    
       position: relative;
    
        z-index: 10;
        height: 69px;
        margin: 0 auto;
    }
    
    .arrow-wrapper {
        z-index: 5;
        background:url(../images/arrow_tip.png) no-repeat top left;
        width: 50%;
        position: absolute;
        left: 50%;
        top: 18px;
        padding: 0 0 0 120px; 
        height:23px;
        margin-left:140px;
    }
    
    .arrow-tail{
        background:url(../images/arrow_tail.png) repeat-x top left;
        height:23px;
        width:100%;
    }
4

It would be interesting to see this live. I’m not too keen on position: absolute and the like, but I’m glad you are happy with the result. Thankfully, there are various ways to do most things on the web. :slight_smile:

5

I know this thread is sort of old, but I was wondering if anyone knew how to make a slight adjustment. Everything should work exactly the same however now the logo is dynamic. The Height never changes but depending on the page, the width varies.

The above solution works perfect with a static image, but it the image becomes wider then the extending graphic to the right does not get pushed over to make room for the different width image.

If I find a solution I will update this thread, but I figure I would post as I start experimenting in case someone might know the answer off the top of their head.

Thanks in advance!!

6

Can you post a link to what you have?