Centering a button on a background image
Question
I'm trying to display a "link button" on top of a div (ccontainer) with a background image. It works with a position:absolute but with a position:relative it disappears. I'm wondering why that is as I would like the button to be relative to the div.
My other question is how can I make my "scontent" div come after (below) my "contnent" div. I made my background image transparent and can see the "scontent" grey background color overlapping from behind.
body { margin: 0; padding: 0; background-color: #999; } .header { z-index:3; position:fixed; background-color:#2B193E; border:0px solid #ffffff; height:70px; left:0; width:100%; top:0; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.7; /*Opacity end*/ } .hcontainer { position: relative; width:100%; } .headingtext { color: #ffffff; text-align: center; width: 100%; } .content { z-index:1; position: absolute; top:0; left:0; height: 100%; width: 100%; padding:0px 0px; } .ccontainer { height: 100%; width: 100%; background:url(my.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; opacity: 0.9; background-size: 100% 100%; } .scontent { width: 100%; height: 2000px; padding:0px 0px; } .sccontainer { width: 100%; height: 100%; background-color: #444444; } .footer { z-index:2; background: #2B193E; position: fixed; bottom:0; height:5em; width: 100%; padding: 0em 0em; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.7; /*Opacity end*/ } .fcontainer { position:relative; color: #fff; text-align: center; top: 40%; } .btn { position: absolute; width: 150px; margin-left:-75px; left: 50%; bottom:200px; display: inline-block; padding: 5px; color: #ffffff; border: 2px solid #fff; border-radius: 5px; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; } .btn:hover, .btn:focus, .btn:active { background-color: #fff; color: #000; transition: background-color 0.3s ease-in, color 0.3s ease-in; }
<body class="body"> <div class="header"> <div class="hcontainer"> <h1 class="headingtext">Poise for victory!</h1> </div> </div> <div class="content"> <div class="ccontainer"> <a href="http://www.google.com" class="btn"> Submit!</a> </div> </div> <div class="scontent"> <div class="sccontainer"></div> </div> <footer class="footer"> <div class="fcontainer"> MADE <em class="calluna">in</em> USA </div> </footer> </body>
*Edit: Here are some images illustrating what I mean. The left is how I wish to have the layout and the one on the right is how it is right now. The second image shows how the gray background overlaps the background image from behind. Also I'm using z-index to keep the header and footer over the 2 contents.
3 answers
solution1
0 2015-09-24 14:52:39
Position absolute, listens to the first parent element, having its position set to something other than it's default value of "static".
So, if you add a position fixed / absolute / relative to the div containing the link, it should allow you to use position absolute in the link element to position it relative to the parent element.
Also, if you use position relative on an element, and not set any position values, for left / top, it does nothing to its behavior.
for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/position
solution2
0 2015-09-24 19:50:34
Is this what you wanted?????
Not sure where the grey is coming in also.
If you want to see this correctly click 'full page' after selecting run code snippet. it adjust to the smaller sized box it is in.
body { margin: 0; padding: 0; background-color: red; } .header { z-index:3; position:fixed; /*Opacity Being done with RGBA */ background-color:RGBA(51, 37, 65, 0.7); border:0px solid #ffffff; height:70px; left:0; width:100%; } .hcontainer { position: relative; width:100%; } .headingtext { color: #ffffff; text-align: center; width: 100%; } .content { z-index:1; position: absolute; top:0; left:0; height: 100%; width: 100%; padding:0px 0px; background-image: url('http://www.liveurlifehere.com/wallpaper/uploads/liveurlifehere-wallpaper1431009496.jpg'); background-size: 100% 100%; } .ccontainer { height: 100%; width: 100%; background:url(my.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; opacity: 0.9; background-size: 100% 100%; } .scontent { width: 100%; height: 2000px; padding:0px 0px; } .sccontainer { width: 100%; height: 100%; background-color: #444444; } .footer { z-index:2; background: #2B193E; position: fixed; bottom:0; height:5em; width: 100%; padding: 0em 0em; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.7; /*Opacity end*/ } .fcontainer { position:relative; color: #fff; text-align: center; top: 40%; } .btn { position: absolute; width: 150px; margin-left:-75px; left: 50%; bottom:200px; display: inline-block; padding: 5px; color: #ffffff; border: 2px solid #fff; border-radius: 5px; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; z-index: 1; } .btn:hover, .btn:focus, .btn:active { background-color: #fff; color: #000; transition: background-color 0.3s ease-in, color 0.3s ease-in; }
<body class="body"> <div class="header"> <div class="hcontainer"> <h1 class="headingtext">Poise for victory!</h1> </div> </div> <div class="content"> <div class="ccontainer"> <a href="http://www.google.com" class="btn"> Submit!</a> </div> </div> <div class="scontent"> <div class="sccontainer"></div> </div> <footer class="footer"> <div class="fcontainer"> MADE <em class="calluna">in</em> USA </div> </footer> </body>
solution3
0 ACCPTED 2015-09-28 04:17:09
Thanks for the help. The problem was my positioning of the elements. Now I only use the "static" default and relative positioning. This site also helped not only with z-indexing but normal layouts. The html stayed the same but the css is shown below for reference. I also added 100% width and height to the html and body which helped a lot.
html, body { height: 100%; width: 100%; margin: 0; padding: 0; /* font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; */ } .header { position:fixed; height:5em; width:100%; z-index:3; background-color:#2B193E; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.7; /*Opacity end*/ } .hcontainer { height: 100%; } .headingtext { position: relative; top: .5em; text-align: center; color: #ffffff; } .content { height: 100%; background:url(http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg) no-repeat center center fixed; background-size: 100% 100%; } .ccontainer { border: 1px dashed #669966; position: relative; width:40%; height:40%; left:30%; top:50%; } .scontent { height: 1500px; background:url(mypicture.jpg) no-repeat center center fixed; opacity: 0.4; background-size: 100% 100%; } .sccontainer { height: 100%; width: 100%; } .footer { position: fixed; height:3em; width: 100%; bottom:0em; z-index:2; background: #2B193E; padding: 0em 0em; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.7; /*Opacity end*/ } .fcontainer { position: relative; top:1em; text-align: center; color: #ffffff; } /* ----------------------- Single styles ------------------------*/ .infotable { position: relative; border: 1px dashed #ffffff; width: 70%; margin-bottom:0px; top: 50%; left:15%; } .btn { border: 20px dashed #000000; position: relative; left:50%; top:-50%; width: 150px; margin-left:-75px; display: inline-block; padding: 5px; color: #ffffff; border: 2px solid #ffffff; border-radius: 5px; text-align: center; /* outline: none;*/ text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; } .btn:hover, .btn:focus, .btn:active { background-color: #fff; color: #000; transition: background-color 0.3s ease-in, color 0.3s ease-in; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.