Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to create a call-to-action box that's fixed in the top-left?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #161466
    Jason
    Participant

    I have WordPress domains. I’m trying to figure out how to make a call-to-action box — perhaps 150×150 or so, but something that stands out that makes an end-user want to click it.

    I’d like it to float in the top left-hand corner of the screen, regardless of resolution or device. But the thing is, is I’d rather do it using pure CSS.

    But I have no idea how to do it the pure CSS way, if possible. I already have this as my background image (used this method suggested by CSS Tricks):

    body {
        color: #737373;
      background: url(images/bg-nyc.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
        font: 12px/1.5 'Helvetica Neue', Arial, Helvetica, sans-serif;
    }
    

    But again, I’d like a 150×150 box in the top-left, and I’ll make some bright yellow image in Photoshop that stands out. It’s a fashion website for women found here, so I’d like it to stand out, but not add much to page load times.

    Any help in this regard would be truly appreciated! Thanks!

    #161470
    noahgelman
    Participant

    If you want something to stay attached to the top left corner you can give it:

    position:absolute:
    top:0;
    left:0;
    
    #161471
    Jason
    Participant

    Thanks for responding, Noah. But do you know where I’d put it in my stylesheet?

    I already have a background image for the body, as shown in the code above. So I’m not sure how to incorporate a box into the CSS, since I already declared a background image.

    #161472
    Paulie_D
    Moderator

    The box would be a div in your HTML…not the CSS.

    You would use the CSS to position and style it.

    #161473
    noahgelman
    Participant

    Small type I did. “absolute” should be “fixed”.

    What I would do is instead of making it a background image, I would create another element on the page, and make it the backrgound image of that, and then put that element in the top left, like so:

    HTML

    <body>
      <div id="cta">
      </div>
    </body>
    

    CSS

    #cta {
      position:fixed:
      top:0;
      left:0
      background: url(images/bg-nyc.jpg) 0 0 no-repeat;
    }
    
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.