When I run my website on a browser, the header (Some Header) should be centered at the top of the webpage but its centered in the middle of webpage. I need some help of fixing this but still keeping the header in a fixed position.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {
margin: 0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.header {
position: fixed;
width: 100%;
height:70px;
background-color: transparent;
text-align:right;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
</style>
<body>
<div class="Coming Soon" style=" color: black;">
<div class="header">
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>
<style>
a{text-decoration: none;
color: white; }
</style>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
</div>
<p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
<div class="footer" style=" color: black;">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company | City State Website All Right Reserved.</p>
</div>
</div>
</body>
</html>
html5 has a native tag header, you don't need to define it as a class, but that's an aside.
If you amend your position to relative (recommended), and moreover, remove the text-align:right; , your 'Some Header' will most likely appear as you want it to.
A note: you have a lot of inline style in your html (and excess html - too many a tags - you have link tags within links unnecessarily - you can remove some). I would recommend you put the inline css in with the css (preferably in a css stylesheet) rather than in the html document. If necessary, you can add a class if you wish to use the same tag later with a variation.
Hope this helps
Related
I'm trying to copy a design from figma, but I'm struggling to figure out what would be the optimal solution for this.
It's supposed to look like this:
[1]: https://i.stack.imgur.com/OADQ6.png
How it looks in a browser:
[2]: https://i.stack.imgur.com/uKHV8.png
I'm trying to position the text, but I'm struggling to find a simple and an optimal solution for this.
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
}
h1 {
font-size: 32px;
margin: 0;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
Not sure if I found the optimal solution, but I simply used flexbox on the div: #mainheader
Then using margin to adjust the spacing between the h1 and h2.
Thank you, Damien Puaud!
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
margin: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
margin: 120px;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
}
h2 {
font-size: 18.72px;
margin: -100px;
width: 360px;
background: #457b9d;
padding: 7px 25px;
border-radius: 5px;
}
#activities {
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
<!-- ACTIVITIES SECTION -->
<div id="activities">
<h3>Top three activities to do at Alver</h3>
<img src="images/le5lrhfv5dygds5nzacn.jpg" />
<img src="images/last ned.jpg" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I did some changes on your code. You can do this also like this:
I put the #mainheader into the vertical div and set the display value table for the vertical div and table-cell for the #mainheader. And for centering the div i gave margin: 0 auto value. Finally for centering vertically i used vertical-align:middle
/**
Palette: https://scrimba.com/links/hometown-palette
RED: #E63946
LIGHT: #F1FAEE
AQUA: #A8DADC
LIGHT BLUE: #457B9D
DARK BLUE: #1D3557
*/
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#mainheader {
background-image: url(images/nhv.jpg);
background-repeat: no-repeat;
background-size: cover;
width: auto;
height: 343px;
color: white;
vertical-align: middle;
display: table-cell;
}
.vertical {
display: table;
margin: 0 auto;
}
h1 {
font-size: 32px;
margin: 15px auto;
background: #1d3557;
padding: 5px 20px;
border-radius: 5px;
width: 350px;
}
h2 {
font-size: 18.72px;
margin: 0;
background: #457b9d;
padding: 5px 4px;
border-radius: 5px;
}
img {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css" />
<title>Visit Alver</title>
</head>
<body>
<!-- HERO SECTION -->
<div class="vertical">
<div id="mainheader">
<h1>Visit Alver</h1>
<h2>
Enjoy culture and sports in this vibrant landscape 30 minutes from
Bergen
</h2>
</div>
</div>
<!-- ACTIVITIES SECTION -->
<div>
<h3>Top three activities to do at Alver</h3>
<img src="images/" />
<img src="images/" />
<img src="images/" />
</div>
<!-- GUIDE SECTION -->
<div>
<h3>Your guide</h3>
<p>
“I have lived at Alver for over 25 years, so I can show you all of its
best parts and hidden secrets.”
</p>
<h4>Nikolai Kodehode</h4>
<img src="images/" />
</div>
</body>
</html>
I am trying to write my contact page, it's for a personal website that I write as part of a project for school. I am trying to display little logos of certain social media sites, and my profile name/mail address next to the images. I have set up an unordered vertical list, I have elements for each individual < li > tag and here comes the problem: Facebook, for example, works fine. The logo is there, and a link to my profile next to it, with the text perfectly aligned vertically right in the center. The problem comes with paragraphs. For my Yahoo Mail address, for example, I cannot provide a link to my profile, so I instead just write my address as simple text between < p >< /p > tags. This text will not align. I don't know what to do. I've been trying stuff out and looking for solutions all over the internet for hours and nothing works. I do admit my HTML and CSS experience is very limited, but please help me. I will attach both my HTML code and the CSS file and I hope someone will take the time to see how they render and maybe help me out. Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Description" content="Pagina de contact">
<meta name="author" content="Matei Popa">
<link rel="stylesheet" type="text/css" href="css/contactstyle.css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
<img class="image" src="img/contact-pg/facebooklogo.jpg" alt="Logo
Facebook">
</a>
</div>
<a href="https://www.facebook.com/matei.popa.332" target="_blank">
Matei Popa
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
<img class="image" src="img/contact-pg/instagramlogo.jpg" alt="Logo
Instagram">
</a>
</div>
<a href="https://www.instagram.com/matei.popa.332/" target="_blank">
matei.popa.332
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/twitterlogo.jpg" alt="Logo Twitter">
</a>
</div>
<a href="https://twitter.com/mateiutz2001" target="_blank">
#mateiutz2001
</a>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo
Mail">
</div>
<div class="paragraph">
<p>alex.matei1808#yahoo.com</p>
</div>
</div>
</li>
<li>
<div class="navlink">
<div class="img">
<img class="image" src="img/contact-pg/gmaillogo.jpg" alt="Logo Gmail">
</div>
<div class="paragraph">
<p>
mattx1829#gmail.com
</p>
</div>
</div>
</li>
</ul>
</div>
<!-- add Phone number, Yahoo Mail, Gmail, Whatsapp, Skype, Reddit, Quora -->
</body>
</html>
Css:
#font-face
{
font-family: Sansation;
src: url(../font/Sansation_Regular.ttf)
}
body
{
background-color: #000;
width: 100%;
height: 100%;
margin: 0;
}
div.container
{
padding-top: 50px;
padding-left: 40px;
margin: 60px;
align-content: flex-start;
}
ul
{
list-style-type: none;
}
li
{
flex-direction: row;
width: 100%;
display: flex;
float: left;
height: 50px;
}
div.navlink
{
display: flex;
flex-direction: row;
width: 100%;
float: left;
text-align: left;
font-family: Sansation;
font-size: 24px;
padding: 10px;
}
a:link
{
color: #FFFFFF;
text-decoration: none;
background-color: transparent;
}
a:hover
{
color: #D1DC19;
background-color: transparent;
text-decoration: underline;
}
a:visited
{
color: #E47507;
background-color: transparent;
text-decoration: none;
}
a:active
{
color: red;
background-color: white;
text-decoration: underline;
}
div.img
{
display: flex;
flex-direction: row;
float: left;
align-content: center;
overflow: hidden;
}
div.paragraph
{
display: table;
margin: 0 auto;
color: #FFFFF;
font-family: Sansation;
padding-left: 0px;
width: auto;
height: 100%;
float: left;
overflow: hidden;
align-content: center;
text-align: center;
}
p
{
height: 100%;
vertical-align: top;
align-content: center;
}
.image
{
vertical-align: middle;
padding-right: 15px;
width: 30px;
height: 30px;
}
How it looks like now
You can provide a link for your Yahoo email address using mailto:youremail#address.com.
See: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_mailto
Your snippet of code for that li would then be:
<li>
<div class="navlink">
<div class="img">
<a href="https://twitter.com/mateiutz2001" target="_blank">
<img class="image" src="img/contact-pg/yahoomaillogo.jpg" alt="Logo Yahoo Mail"></a>
</div>
alex.matei1808#yahoo.com
</div>
</li>
On my website my header is linked back to itself and works fine, but when I put my mouse over it, an unwanted underline shows up underneath it and I do not want that. I already set the header's text decoration to none so I am not sure how to fix this. My code is below.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
<style>
a{text-decoration: none}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
inspect anchor text decoration is located in a:hover , so add
a:hover{
text-decoration:none;
}
There might be a CSS for hover specifically. try: a:hover {text-decoration:none;}
This CSS is what's creating the underline, and it comes from bootstrap
a:focus, a:hover {
color: #014c8c;
text-decoration: underline;
}
You can overwrite it by adding this to your CSS
.Header a:hover, .Header a:focus {
text-decoration: none;
}
You need to put your CSS styles before the HTML. Best place is inside one single style block at the top of your HTML. Your style tag currently is below the link and that's why it's not applied.
You can remove the underline on hover by styling the :hover state specifically. However note that it's not ideal for accessibility.
There are few other issues with your HTML and CSS. It's best practice to avoid inline styles inside of the HTML tags. And you've linked to your home page with a file:// protocol, use http:// as its a webpage. If you're linking to the default home page then you can just do /Home.html too.
You're missing the closing </body></html> tags also.
I've fixed those below as well.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body { margin:0 }
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
.Header a:hover { text-decoration:none }
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
</body>
</html>
you can either use:
a:hover{
text-decoration:none;
}
or use an inline CSS to explicitly specify the text-decoration for that particular anchor element.
<a href="file:///C:/Noah's%20stuff/Home.html" style="text-decoration: none;"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
the snippet below uses the first suggestion as that would be better, however, the latter does work aswell.
snippet:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
a:hover{
text-decoration:none;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
</style>
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html"><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Lunation Boards</h1></a>
</a>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
To add to Ousmane's answer:
You want to change the CSS that affects links at a default status (if any of your CSS does that), from "name", to "name:link" (this will matter if and when more pseudo selectors are added to links styles).
Also, the order for the pseudo selectors is:
"LoVe For HAte".
So:
a:link, a:visited, a:focus, a:hover, a:active
The easy answer to this question was to change the hover attribute of the anchor tag. I am answering my own question so that when someone else looks at this question they will know that this is the correct answer that should work.
a:hover{
text-decoration:none;
}
In my case the container was a <a> element and all the children had their own underline.
I just set text-decoration: none; on the a container.
The website is done and looks good when the browser is in maximized state but when I minimize the page, the heading and the footer changes its format and looks really bad. I need some help to fix this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
</style>
<body>
<div class="Coming Soon" style=" color: white;">
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>
<style>
a{text-decoration: none;
color: white;}
</style>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
<div class="footer" style=" color: white;">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div>
</div>
</body>
</html>
Here is how I have a ton of my pages setup. This one uses Bootstrap components. I have a cutom.css page to override the Bootstrap css.
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
p {
font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px;
}
h1 {
text-align: center; font-family: Verdana; font-size: x-large; font-style: italic;
}
a {
text-decoration: none;
color: white;
}
.Coming Soon {
color: white;
}
.Logo {
width: 130px; height: 80px; margin-right: 100px;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>WEBSITE TITLE HERE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="Description" content="ADD DESCRIPTION.">
<meta name="Keywords" content="ADD KEYWORDS">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<body>
<div class="container">
<div class="Coming Soon">
<h1>Some Header</h1>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p>Some Paragraph</p>
<div class="footer">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div></div></div>
</body>
</html>
I am having an issue with the background of the website I am trying to make, the background is currently the color black but I would like to change it to an image background. I tried putting the background element in the body tag but it messed up the format of the website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Website</title>
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {margin:0;
background-color: black}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
background-color: black;
}
</style>
<body>
<div class = "Coming Soon" style = "background-color: black; color: white;" >
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Lunation Boards</h1>
<style>
a{text-decoration: none;
color: white;}
</style>
<div class="socialmedia">
<a class = "Facebook">
<img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class = "Instagram">
<img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class = "Youtube">
<img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p style = "font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Website currently under development. Kickstarter launching soon!</p>
<div class = "footer" style = "background-color: black; color: gray;">
<img src="Logo.PNG" style = "margin-left: 40%; width: 130px; height: 80px">
<p style = "font-family: Verdana; font-size: small; padding-left: 40%;">2017 Some Company LLC | City State somewebsite.com All Right Reserved.</p>
</div>
</div>
</body>
</html>
You had the background-color set in the body and within <div class = "Coming Soon". I simply removed the background attribute within the div and changed the background-color to background-image in the body. The image I used seems to be fine. Here's a pen with the changes http://codepen.io/bungeedesign/pen/VpjQyg
To use your image simply change the image path/url here background-image: url("http://www.hbc333.com/data/out/80/47919123-flat-wallpaper.png");