I'm trying to add a button on top of a background image in the landing page of the website. I tried using position tag in CSS and it didn't work. Then I tried adding z-index and that didn't work too.
I'm open to any more suggestions. Thank you.
Maybe You can use this:
function testFunc() {
alert('YESS');
}
.wrapper {
width: 100%;
height: 100vh;
position: relative;
}
.background-image {
position: absolute;
width: 100%;
height: 100%;
}
.yourbtn {
position: relative;
padding: 30px;
background-color: red;
color: yellow;
top: 50%;
left 50%;
}
<div class="wrapper">
<img class="background-image" src="https://cdn.vox-cdn.com/thumbor/ZlgvBM5ZISrK4O6gL1YkTOJST2M=/0x0:1221x787/920x613/filters:focal(514x297:708x491):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/60732143/Screen_Shot_2018_08_05_at_10.37.13_AM.0.png">
<button class="yourbtn" onclick="testFunc()">Your Button Right Here</button>
</div>
I don't know what you mean by putting a button on a background image, but this is what I would do.
<body>
<header>
<h1 class="title">text here</h1>
<a class="button" href="#">button</a>
</header>
</body>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
header{
background-image: url(image.png);
background-size: cover;
text-align: center;
height: 30vh;
margin-top: 0;
}
.title{
font-size: 10vh;
color: orange;
margin: 0;
margin-bottom: 5rem;
}
.button{
background-color: #6495ED;
padding: 1rem 3rem 1rem 3rem;
border-radius: 10px;
color: #fff;
text-decoration: none;
}
Related
I tried to use text-align property with display block but that didn't work either. I wanted a div that covered the entire webpage with the mountain image center aligned at its bottom. I managed to move the mountain image to bottom by setting bottom:0; but then I was unable to center align the image. Thank you very much.
<!-- following is the html code: -->
<body>
<div class="topcontainer">
<img class="topcloud" src="images/newcloud.png" alt="cloud-image">
<h1>I'm Mohit</h1>
<p class="occupation">A <span>pro</span>grammer</p>
<img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
<img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
</div>
</body>
<!-- and this is the css: -->
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0;
font-family: 'Sacramento', cursive;
font-size: 70px;
color: #30e3ca;
}
h2 {
font-family: 'Montserrat', sans-serif;
}
h3 {
font-family: 'Montserrat', sans-serif;
}
span {
text-decoration: underline;
}
.mountain {
display: inline-block;
position: absolute;
bottom: 0;
}
.topcontainer {
display: inline-block;
background-color: #e4f9f5;
margin-bottom: 20px;
height: 100vh;
width: 100%;
position: relative;
}
.bottomcloud {
position: absolute;
left:300px;
height: 94.28px;
width: 177.3333px;
}
.topcloud {
position: relative;
left: 290px;
height: 94.28px;
width: 177.3333px;
}
I edit the code a little bit to achieve what you want just add a parent div to the image tag and styled it. So here is the my solution and I hope it is helpful for you.
HTML:
<body>
<div class="topcontainer">
<img class="topcloud" src="images/newcloud.png" alt="cloud-image">
<h1>I'm Mohit</h1>
<p class="occupation">A <span>pro</span>grammer</p>
<img class="bottomcloud" src="images/newcloud.png" alt="cloud-image">
<div class="mountain">
<img class="mountain" src="http://seanhalpin.io/assets/img/content/home/masthead/land.svg" alt="">
<div>
</div>
</body>
CSS:
body {
margin: 0;
text-align: center;
font-family: 'Merriweather', serif;
}
h1 {
margin: 0;
font-family: 'Sacramento', cursive;
font-size: 70px;
color: #30e3ca;
}
h2 {
font-family: 'Montserrat', sans-serif;
}
h3 {
font-family: 'Montserrat', sans-serif;
}
span {
text-decoration: underline;
}
.mountain {
display: flex;
justify-content: flex-end;
align-items: center;
position: absolute;
bottom: 0;
}
.topcontainer {
display: inline-block;
background-color: #e4f9f5;
margin-bottom: 20px;
height: 100vh;
width: 100%;
position: relative;
}
.bottomcloud {
position: absolute;
left:300px;
height: 94.28px;
width: 177.3333px;
}
.topcloud {
position: relative;
left: 290px;
height: 94.28px;
width: 177.3333px;
}
The easiest solve here would be to make the divs background image in CSS rather than using the image tag. Something like this:
<div class="topcontainer">
//other stuff in here
</div>
.topcontainer {
height: 100vh;
width: 100vw;
background-image: url('http://seanhalpin.io/assets/img/content/home/masthead/land.svg');
background-repeat: no-repeat;
background-position: bottom;
}
Hope this helps!
I'm learning now CSS and i'm creating a portfolio page as part of it.
I've created this page: link to the codepen
The thing is, the footer is not sticks to the bottom of the page, can some one tell me how can i fix it? so it will be after the <div id="contact">
Iv'e noticed that when I do put it in the <div class="content"> it does work, I tried to figure out why and I didn't got it.
Thanks.
CSS & HTML are here:
html,
body,
main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Alef";
}
header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav {
width: 960px;
height: 70px;
margin: 0 auto;
}
nav ul {
margin: 10px 0 0;
}
nav ul li {
display: inline-block;
margin: 0 40px 0 0;
}
a {
color: #4d4d4d;
line-height: 42px;
font-size: 18px;
padding: 10px;
text-decoration: none !important;
}
.active {
color: #004cc6;
font-weight: bold;
font-size: 20px;
background: #f9fafc;
}
.content {
margin-top: 70px;
width: 100%;
height: 100%;
}
.content > div {
width: 80%;
height: 50%;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 25px;
}
#home {
background: #0f5fe0;
}
#portfolio {
background: #129906;
}
#about {
background-color: #a00411;
}
#contact {
background-color: black;
}
:target:before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
<header>
<nav>
<ul>
<li><a class="active" href="#home">My Page</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class="content">
<div id="home">
<p>#home</p>
</div>
<div id="about">
<p>#about</p>
</div>
<div id="portfolio">
<p>#portfolio</p>
</div>
<div id="contact">
<p>#contact</p>
</div>
</div>
</main>
<footer>
Fotter
</footer>
Remove height: 50%; from .content > div if you want to put footer just after contact.
Codepen
If you want to stick footer to the bottom of the browser window, then add this to your css:
footer {
position: fixed;
bottom: 0px;
}
Codepen
Change footer value like below
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
you can use vh instead of percentage to set the min-height of main, then you need to remove the height
.main {
min-height: 100vh; // Change as per your requirement
}
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 am making a site for a school project. Everything was going well until I zoomed my creation, the facebook icon and map hyperlink started moving left, their position didn't seem a problem on zooming out since they were exactly as they had to be. My code is clumsy written, I've just started learning CSS so please leave a negative response.
CSS:
body {
background-image: url("backgr.jpg");
background-size: cover;
overflow-x: hidden;
}
.site {
background-image: url("repet.jpg");
background-position: center top;
background-repeat: repeat-x;
}
.all {
position: relative;
}
.lin {
display: block;
margin-left: auto;
margin-right: auto;
}
.fc {
position: absolute;
height: 50px;
width: 50px;
margin: 0 auto;
left: 300px;
right: 0;
top: 55%;
}
.map1 {
position: absolute;
text-decoration: underline;
font-family: "Myriad-Pro", Calibri;
letter-spacing: -0.05em;
font-style: condensed;
font-size: 130%;
color: white;
left: 85px;
text-align: center;
width: 100%;
top: 53.2%;
}
.map2 {
position: absolute;
text-decoration: underline;
font-family: "Myriad-Pro", Calibri;
letter-spacing: -0.05em;
font-style: condensed;
font-size: 130%;
color: white;
left: 80px;
text-align: center;
width: 100%;
top: 70%;
}
HTML
<div class="all">
<a href="https://www.facebook.com/MumbaiIndianStruma31Burgas/?fref=ts">
<img src="fc.png" class="fc">
</a>
<a class="map1" href="https://www.google.bg/maps/place/Mumbai+Indian+Restaurant/#42.5047587,27.4665381,17z/data=!3m1!4b1!4m2!3m1!1s0x40a69490c9140d5d:0xe145b9d1e18c51ee">
Карта
</a>
<a class="map2" href="https://www.google.bg/maps/place/Mumbai+Indian+Restaurant/#42.5047587,27.4665381,17z/data=!3m1!4b1!4m2!3m1!1s0x40a69490c9140d5d:0xe145b9d1e18c51ee">
Map
</a>
<div class="site">
<img src="line.jpg" class="lin">
</div>
</div>
Fiddle demo
You can use Padding left, Padding Right and margin option to set the image
my code is all jumbled up I believe. I have a ton of white space down at the bottom of my page and I don't know why. I've basically just been going with whatever works thus far but I also want my page to be responsive and it scales really weird atm. This is probably a really hard question to help with but if anyone can I would be super grateful. Any suggestions on what to do are extremely appreciated.
Heres the code:
http://jsbin.com/rugidepebe/1/edit?html,css,output
HTML
<!Doctype html>
<html>
<head>
<title>Application</title>
<link rel="stylesheet" type="text/css" href="standard.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="margin-right">
</div>
<div id="margin-left">
</div>
<div id="navbar">
</div>
<div id="contenthead">
<h1 id="AppHead">Application</h1>
</div>
<div id="appbike">
<h2>Walk/Bike</h2>
<img src="images/bike.png" id="bike"/>
</div>
<div id="appmotor">
<h2>Motor</h2>
<img src="images/car.png" id="car"/>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
#navbar {
position: fixed;
width: 100%;
height: 50px;
background-color: #0C4564;
z-index: 3;
}
#margin-right {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;
}
#margin-left {
position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;
}
#AppHead {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;
}
#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}
#appbike {
position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;
}
#bike {
width: 70%;
position: relative;
margin-top: 50%;
}
#appmotor {
position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;
}
h2 {
text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;
}
#car {
width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;
}
You still have to treat the hmtl & body as wrappers sometimes, you're setting the height to 150%, of which it's parent height is auto so it is a bit confused. Just change your first rule to the following:
body, html {
margin: 0px;
padding:0;
height:100%;
}
Adding in height 100% should fix your issue, also added in padding:0; and the html doc to the css selector.