I want to place the button at the bottom left side. The alignment should be responsive.
Below is my html code:
.third-banner {
/*background-image: url("banner3.PNG");*/
background-image: url("banner3new.JPG");
background-size: 100%;
background-repeat: no-repeat;
height: 100%;
width: 90%;
}
.banner-btn {
border-radius: 17px;
color: white;
margin-top: 600px;
margin-right: 350px;
font-size: 23px;
}
.banner-btn:hover {
background-color: #1492ed;
border-block-color: #1492ed;
}
<center>
<div class="third-banner">
LEARN MORE
</div>
</center>
.third-banner {
background-image: url("https://picsum.photos/id/20/800/600");
background-size: 100%;
background-repeat: no-repeat;
height: 100vh;
width: 90%;
}
.banner-btn {
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 17px;
color: white;
font-size: 23px;
}
.banner-btn:hover {
background-color: #1492ed;
border-block-color: #1492ed;
}
<div class="third-banner">
LEARN MORE
</div>
If you position:absolute your button not in a relative div, it'll be absolute of body.
give the parent container position:relative it will work
Related
I am trying to set up my H1 tags with an expanding background-image, that serves as a "lower border" for the title, similar to this:
Here is the fiddle I am working with:
https://jsfiddle.net/gq4b7vu4/
#logoBuild {
width: auto;
border: 1px solid #F500FD;
}
h1 {
text-align: center;
color: #958a68;
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
display: table!important;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
}
}
#titleBottom {
border: 2px solid #0FEEF1;
}
#leftBottom {
width: 48px;
height: 20px;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
background-repeat: none;
border: 0px solid #F20004;
float: left;
}
#rightBottom {
width: 48px;
height: 20px;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
background-repeat: none;
border: 0px solid #F20004;
float: left;
}
#centerBottom {
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
float: left;
width: auto;
}
#descenderBottom {
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png");
background-repeat: repeat-x;
float: left;
width: 1px;
height: 27px;
}
<div id="pageHead">
<div id="logoBuild">
<h1>Title goes here</h1>
<div id="titleBottom">
<div id="leftBottom"></div>
<div id="centerBottom"></div>
<div id="rightBottom"></div>
</div>
<div style="clear:both;"></div>
<div id="descenderBottom"></div>
</div>
I need the graphic to expand according to the width of the title, with the end flourishes on either side and the descender beneath it.
I've tried to build the border after (separate from) the H1 declaration, and I tried placing the H1 inside of the centerBottom div, both to no avail.
Well this was a lot of fun
https://jsfiddle.net/gq4b7vu4/3/
Changed many of your styles to just psuedo content selectors.
#pageHead { overflow: visible; }
.logoBuild {
display: block;
width: 600px;
margin: 0 auto;
}
h1 {
position: relative;
display: inline-block;
width: auto;
min-height: 75px;
margin: 0 auto;
text-align:center;
color:#958a68;
font-family: 'Cantarell', sans-serif;
text-transform:uppercase;
background-image: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottomborder.png");
background-repeat: repeat-x;
background-position: 0 48px;
overflow: visible;
}
h1 img {
position: absolute;
top: 68px;
left: 50%;
}
h1::before {
position:absolute;
left:-48px;
bottom: 0;
content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_left.png");
}
h1::after {
position: absolute;
right: -48px;
bottom: 0;
content: url("http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_right.png");
}
<div id="pageHead">
<div class="logoBuild">
<h1>
Title goes here
<img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
</h1>
</div>
<div class="logoBuild">
<h1>
Oh hey another cool one
<img src="http://69.195.124.96/~scottar4/wp-content/themes/fscottfitzgerald/images/header/fscottfitzgerald_title_bottom_descender.png" alt="" class="bottom-center-brdr">
</h1>
</div>
</div>
Things to note, min-height on that h1. You'll also need some bottom margin added to that header tag. There's an inline image in the header tag, didn't see an easy way to get around that, but assuming it could be implemented through more psuedo selectors and or a non-block element.
I've looked for a previous answer that helped me but couldn't find one.
HTML:
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
CSS:
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position: absolute;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 35%;
left: 44.5%;
margin-top: -65px;
margin-left: -33px;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
How do I set it up so that no matter the zoom of the page, the div/image is always horizontally aligned with the text below it?
The site is: http://libeclipse.me/
<html>
<head>
<style>
section#pane_one {
display: block;
position: relative;
width: 100%;
text-align: center;
min-height: 450px;
height: 700px;
}
h1#logo {
position:relative;
z-index: 0;
width: 200px;
height: 200px;
background-color: #000;
text-indent: -9999px;
top: 200px;
display: inline-block;
background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
background-size: 100%;
border-radius: 50%;
border: solid black;
}
h2#hello {
position:absolute;
top:0px;
width:100%;
margin:auto;
}
</style>
</head>
<body>
<section id="pane_one">
<h1 id="logo">lel</h1>
<h2 id="hello"><span>Hello.</span> You’ve reached my page.</h2>
</section>
</body>
<html>
Review this and make note of the margin:auto (Centered the h2text in absolute position) and display:inline-block(Centered the bunny image).
Removed the left % and margins that were present from h1#logo.
Enjoy.
Thanks.
On the h1#logo rule change the left to 50% and the margin-left to -100px
I have a div which has a background of a map. The map is centred and has a background size of 'contain'. The page is responsive so when the window resizes, so does the map. I need to be able to have a div on top of a certain country on the map, and on resize of the background map, the div stays directly on top of it.
So far I have
<div id="map-holder">
<div class="content">
<div class="placeholder"></div>
</div>
</div>
The div with the class of placeholder is the div i wish to keep on top of a certain country. The div with map-holder for ID is the div with the map background. Content is just to keep it all in place.
CSS
.content {
text-align: center;
width: 1200px;
margin: 0 auto;}
#map-holder {
position: relative;
height: 1000px;
width: 100%;
background: #F0F0F0;
background-image: url(../images/image-mapster.min.png);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
padding: 30px;
}
.placeholder {
position: absolute;
right: 30px;
background: #fff;
width: 80px;
height: 50px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
padding: 0;
cursor: pointer;
}
.placeholder img {
width: 100%;
height: 100%;
padding: 0;
}
.placeholder:before {
position: absolute;
top: 30%;
left: 45%;
font-weight: bold;
content: '+';
}
The only solution I can think if actually putting an image over the map.
You can do this by having multiple CSS backgrounds. Just change your code for #map-holder to this:
#map-holder {
position: relative;
height: 500px;
width: 500px;
background: #F0F0F0;
background-image: url(this_image_goes_on_top.png), url(your_map.jpg);
background-size: contain, contain;
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
padding: 30px;
}
I made a little JSFiddle out of your code for demonstration: https://jsfiddle.net/zamofL9g/1/
Basically, it's a little difficult, as I recall, when using background images.
Since the image is, technically speaking "content" you can use an inline image and suitable wrapping divs. The 'pins' can then be positioned using % based positioning values.
Here's a Codepen demo I made some time ago. This one has a tooltip too!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
width: 90%;
margin: 10px auto;
position: relative;
}
.map img {
max-width: 100%;
}
.box {
width: 2%;
height: 5%;
background-image: url(http://www.clipartbest.com/cliparts/ncX/qyL/ncXqyLdcB.png);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 38%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: -25%;
left: 110%;
width: 300%;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
I seem to be having a slight problem here. My divs dont show up in the web page. I tried changing the position of the div to absolute but it still dosen't show up.
Here is my code:
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
in your css add this
html, body { height: 100%; width: 100%; margin: 0; }
I've converted your example code into a code snippet and it seems to work fine. What exactly seems to be wrong? Are you missing the .header <div>? In that case give it some content or give it a fixed width. How should the .header look?
body {
background: url("http://fux-media.com/yz/skyline_exp1.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.header {
background-color: #DADAC8;
width: 900px;
height: 10%;
position: relative;
border-radius: 7px;
margin-top: -100px;
margin-left: 170px;
z-index: 500;
}
img {
border-radius: 70%;
border: 1px solid;
margin-left: 40%;
height: 175px;
width: 175px;
position: relative;
z-index: 1;
}
<img src="http://farm5.static.flickr.com/4118/4890853985_b34231ccfb_o.jpg" />
<div class="header"></div>
Your div is present there. But it doesn't have any contents that's why it is not visible.
Add some content in it like text etc. or add some padding to the 'header' class. Then you will be able to see it.
Im working on a background image that is placed with inline styling, that has a red tint overlaying the image.
The problem occurs when the red tint is covering the content.
How would I make the red tint go under the buttons and text?
Please see JS Fiddle
Appreciate the help
#cover-wrap {
position: relative;
}
#cover-wrap .black-cover {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
#backgrond-cover {
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 50px;
color: #fff;
position: relative;
}
#backgrond-cover .username {
font-weight: bold;
margin-top: 10px;
}
#backgrond-cover .location {
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
if you want the buttons to be over the overlay red tint. then move the buttons above the plane of the red tint.
to achieve that you need to give a z-index to the button ( imagine z axis in graph) positive value brings it above and negative values push it down. But to give a relative positioning of z axis you also have to specify the css position to relative
add this css to the bottom of your code...
button{
position:relative;
z-index:10;
}
now this will target all buttons in the page. If you want to target only specific buttons, give the buttons an id or class.
Also there is a unclosed paragraph tag in your code < / p >. Not sure if you had a copy paste error or not
Try this onces..i had brought some changes which does what you want.
<div id="cover-wrap">
<div class="black-cover"></div>
<div id="background-cover" class="center">
<div id='box'>
<img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
<p class='username'>Cloud #3</p>
<p class="location">Birmingham</p>
<p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>
<button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>
<button class="hangout-btn">Hang out</button>
</div>
</div>
</div>
<!-- html ends here -->
<!-- css looks like this -->
#cover-wrap
{
position: absolute;
width: 1350px;
}
.black-cover
{
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
width: 100%;
height: 100%;
}
#backgrond-cover
{
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 50px;
color: #fff;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg');
display: inline-block;
height: 100%;
width:92.6%;
}
#box
{
position: relative;
}
#backgrond-cover .username
{
font-weight: bold;
margin-top: 20px;
}
#backgrond-cover .location
{
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
/*css ends here */
Sorry did not read the question. I've updated with the it now working. You need to se the z-index on all elements you want above the red grad or like I did wrap all of them in a div and position that above the grad. Note, need position on all elements you want to use z-index on.
http://jsfiddle.net/MatrixMe/8pmdzms8/1/
HTML
http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg')">
<div class="content-wrapper">
<img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
<p class="username">Cloud #3<p>
<p class="location">Birmingham</p>
<p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>
<button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>
<button class="hangout-btn">Hang out</button>
</div>
<div class="black-cover"></div>
CSS
/*Cover Info*/
#cover-wrap {
position: relative;
}
div.black-cover {
background-color: rgba(255, 0, 0, 0.5);
position: relative;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
}
.content-wrapper {
position: absolute;
z-index: 50;
width: 100%;
height: 100%;
left: 20%;
top: 20%;
display: inline-block;
}
#backgrond-cover {
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fff;
position: absolute;
display: inline-block;
z-index: -1;
width: 100%;
height: 300px;
}
#backgrond-cover .username {
font-weight: bold;
margin-top: 10px;
}
#backgrond-cover .location {
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
If you want to create overlay by making it absolute but it cover the content, you can play with z-index then. First set z-index of the container to 1, then add z-index -1 to the overlay. This should make overlay placed under the content.
.item{
background: url(https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/1824627/logotypes_1x.jpg);
background-size: cover;
width: 300px;
height: 300px;
position: relative;
z-index:1;
}
h1{color: white}
.item:after{
content:"";
background: rgba(255,0,0,.5);
position: absolute;
top: 0;
bottom:0;
left:0;
right: 0;
z-index:-1;
}
<div class="item">
<h1> content here</h1>
</div>
The snippet above is make use of after pseudo element to make the overlay rather dan using another HTML tag.
i have restructured your code, deleting unnesessary tag, you can check it out here http://jsfiddle.net/rzp318kb/6/
just add this
#backgrond-cover p, #backgrond-cover span, #backgrond-cover button, #backgrond-cover img {
position: relative;
z-index: 20;
}
and add z-index: 10; to #cover-wrap .black-cover. Should do the trick.