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

This topic is empty.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
January 30, 2014 at 2:00 pm #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!
January 30, 2014 at 2:41 pm #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;
```
January 30, 2014 at 3:21 pm #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.

January 30, 2014 at 3:31 pm #161472

Paulie_D
Member

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

You would use the CSS to position and style it.

January 30, 2014 at 3:32 pm #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;
}
```
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

The forum ‘CSS’ is closed to new topics and replies.