- This topic is empty.
-
AuthorPosts
-
January 30, 2014 at 2:00 pm #161466JasonParticipant
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 #161470noahgelmanParticipantIf 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 #161471JasonParticipantThanks 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 #161472Paulie_DMemberThe 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 #161473noahgelmanParticipantSmall 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; }
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.