It doesn't give error but it doesn't work. I cannot see the file on the other server.
What should I write to upload file with curl with no user interaction?
$curl -k -F 'myfile=#/opt/test.txt' -H 'HTTP_AUTH_LOGIN:<destinationHostUsername>' -H 'HTTP_AUTH_PASSWD:<destinationHostPassword>' <destinationHostName>/
This html code below is the output when I run that curl command. I tried many lines but I couldn't do it. Can you guys can help me out?
(says "It looks like your post is mostly code; please add some more details." So I'm gonna write lots of things you don't have to read it
It looks like your post is mostly code; please add some more details.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Page for the Apache HTTP Server on Red Hat Enterprise Linux</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* <![CDATA[ */
body {
background-color: #fff;
color: #000;
font-size: 0.9em;
font-family: sans-serif, helvetica;
margin: 0;
padding: 0;
}
:link {
color: #c00;
}
:visited {
color: #c00;
}
a:hover {
color: #f50;
}
h1 {
text-align: center;
margin: 0;
padding: 0.6em 2em 0.4em;
background-color: #900;
color: #fff;
font-weight: normal;
font-size: 1.75em;
border-bottom: 2px solid #000;
}
h1 strong {
font-weight: bold;
}
h2 {
font-size: 1.1em;
font-weight: bold;
}
hr {
display: none;
}
.content {
padding: 1em 5em;
}
.content-columns {
/* Setting relative positioning allows for absolute positioning for sub-classes */
position: relative;
padding-top: 1em;
}
.content-column-left {
/* Value for IE/Win; will be overwritten for other browsers */
width: 47%;
padding-right: 3%;
float: left;
padding-bottom: 2em;
}
.content-column-left hr {
display: none;
}
.content-column-right {
/* Values for IE/Win; will be overwritten for other browsers */
width: 47%;
padding-left: 3%;
float: left;
padding-bottom: 2em;
}
.content-columns>.content-column-left,
.content-columns>.content-column-right {
/* Non-IE/Win */
}
img {
border: 2px solid #fff;
padding: 2px;
margin: 2px;
}
a:hover img {
border: 2px solid #f50;
}
/*]]>*/
</style>
</head>
<body>
<h1>Red Hat Enterprise Linux <strong>Test Page</strong>
</h1>
<div class="content">
<div class="content-middle">
<p>This page is used to test the proper operation of the Apache HTTP server after it has been installed. If you can read this page, it means that the Apache HTTP server installed at this site is working properly.</p>
</div>
<hr />
<div class="content-columns">
<div class="content-column-left">
<h2>If you are a member of the general public:</h2>
<p>The fact that you are seeing this page indicates that the website you just visited is either experiencing problems, or is undergoing routine maintenance.</p>
<p>If you would like to let the administrators of this website know that you've seen this page instead of the page you expected, you should send them e-mail. In general, mail sent to the name "webmaster" and directed to the website's domain should reach the appropriate person.</p>
<p>For example, if you experienced problems while visiting www.example.com, you should send e-mail to "webmaster#example.com".</p>
<p>For information on Red Hat Enterprise Linux, please visit the Red Hat, Inc. website. The documentation for Red Hat Enterprise Linux is available on the Red Hat, Inc. website. </p>
<hr />
</div>
<div class="content-column-right">
<h2>If you are the website administrator:</h2>
<p>You may now add content to the directory <tt>/var/www/html/</tt>. Note that until you do so, people visiting your website will see this page, and not your content. To prevent this page from ever being used, follow the instructions in the file <tt>/etc/httpd/conf.d/welcome.conf</tt>. </p>
<p>You are free to use the image below on web sites powered by the Apache HTTP Server:</p>
<p align="center">
<a href="http://httpd.apache.org/">
<img src="/icons/apache_pb2.gif" alt="[ Powered by Apache ]" />
</a>
</p>
</div>
</div>
</div>
</body>
</html>
Related
I currently have an App_Offline.htm file that works fine. When it's on the root of the site, all users are forces to the App_Offline.htm page and the application is prevented from loading.
We are adding some animations and images and the only proper way to do it in an App_Offline.htm is to use base64 images, inline.
The minute I add this (note I shortened the base64 for the post), it works if I go to the file in the browser directly but IIS/Azure/App Service, does not automatically force users to the page and prevent the app like it normally does.
.image2 {
width: 57px;
height: 54px;
background-image: url(data:image/png;base64,iVBOR.....rkJggg==);
}
I figure there some content security setting or something I need add. Even though the page loads properly, what's preventing IIS/App Service from forcing everyone to the page when it has a base64 image?
Unless there's a file limit size, it's current 2896 KB, but from research there doesn't seem to be one.
Normally, when you have the app_offline.htm file in the application root directory, your web application will be closed and all requests will be directed to the app_offline.html page.
So you have two ways,
You can write .image2 related code in app_offline.htm
Put the .css on other websites, or use other addresses to access the files.
Related Post
Add css style sheet to app_offline
PRIVIOUS
For more details, you can refer my sample code, you just need to replace base64 image code.
My test result.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: local("Segoe UI"), local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body {
font-family: "Open Sans";
}
h1 {
font-size: 90px !important;
}
.error-page-container {
color: #333333;
margin: 50px auto 0;
text-align: center;
width: 600px;
}
.error-page-container h1 {
font-size: 120px;
font-weight: normal;
line-height: 120px;
margin: 10px 0;
font-family: "Open Sans";
}
.error-page-container h2 {
border-bottom: 1px solid #CCCCCC;
color: #666666;
font-size: 18px;
font-weight: normal; /*text-transform: uppercase;*/
font-family: "Open Sans";
}
.error-page-container a {
text-decoration: none;
color: #ffffff;
background-color: #009AD7;
padding: 11px 19px;
}
.error-page-container a:hover {
text-decoration: none;
}
.image2 {
width: 500px;
height: 300px;
background-image: url('data:image/png;base64,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');
}
</style>
<title>
Under Maintenance
</title>
</head>
<body>
<div class="error-page-container">
<h1>Maintenance</h1>
<div class="image2" src="" alt="test">
</div>
<h2>
<p>Website is under maintenance right now. It will be back in few minutes.</p>
</h2>
<br />
Try again
</div>
</body>
</html>
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
I have a website that is primarily html5 and css3, and the pages look good when I run them locally from my pc on chrome and internet explorer 11.0.47, but when I put it on the Linux server and run the page from there on my own pc, the page loses the css in IE but is fine in chrome.
I don't have a lot of experience with html5/css3. What's going on here? I tried googling it, but don't see any online help.
The web page is start of web site. As you can see, in IE, Map Home isn't shown as a button in nav to the left, and nav lost it's brown background. It also lost the header background. If you look at the link in chrome, it has those.
Any ideas? Could there be a directional issue with use of the media folder when IE pulls it from Linux but not chrome?
**Added:
I see this on the server log, but when I list the location on the server, the file exists there. The css file (catvStyles.css) referring to the globe file is in the same dir as index.html, and the media dir is in the dir of index.html.
File does not exist:
/opt/apps/html/catv/media/globe_transp_gradation.png), url(..,
referer: http://ltrkarkvm391.mgmt.windstream.net/catv/index.html
**
This looks similar to other web page if you can't reach the link. The problem is my linux hosted site isn't showing the brown nav to the left, it's not showing the metal header globe, and windmill pictures, and it's not showing Map Home in a button (it's as a link without the button), and it's not showing the picture in the right side to the right (it's in the body now).
This is the index.html page:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="FunStuff/catvStyles.css">
<title>CATV Monitoring</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wi">
<meta name="keywords" content="catv, cmts, snmp, modem, dhcp, rf, status, map">
<meta name="author" content="Wi, Michele, Adam">
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner" class="bgFun">
<h1>Wi</h1>
<h2 id="headerH2Pos">CATV Monitoring System</h2>
</header>
<div id="page">
<nav role="navigation" id="navBakImg">
<ul>
<li>Map Home</li> <!--MapHome.html-->
</ul>
</nav>
<main role="main" id="middle">
<h2>Purpose</h2>
<p>To provide CATV Monitoring to our internal customers</p>
</p>
<h2>Mapping </h2>
<p>Click the "Map Home" link on the left to see how the network is doing </p>
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
</p>
</main>
<aside role="complementary">
<img class="imgFix" src="media/WIN_Vert_Green_Logo.png" height:"18" width:"15" alt="Logo" title="Wi" >
<h2>How To Start</h2>
<p>See directions</p>
</aside>
</div> <!-- end of flex container -->
<footer role="contentinfo">
<img class="tree" src="media/Tree_Branches_And_Roots_clip_art_small.png" height="50" width="50" alt="Tree" title="Created by Michele " >
<br>Copyright © 2017
<script>
document.write('Last Modified: ' + document.lastModified);
</script>
<br>
</footer>
</div>
</body>
</html>
This is the css catvStyles.css:
body {font-family: Verdana, Arial, sans-serif;
background-color: #330000;
background-image: url(../media/green.gif);
}
#middle{}
header, h1, wrapper { margin-top: 0; }
#wrapper { background-color: #F4E8BC;
/*background-color: #00ffff;*/
width: 90%;
margin: auto;
color: #003300;/*color: #330000;*/
}
h1, h2 { color: #003300; }
header {
background-repeat: no-repeat;
background-color:transparent;
}
.bgFun{background-image: url(../media/globe_transp_gradation.png),
url(../media/windmill_transp_gradation.png),url(../media/MetalGalvanized0014_M.jpg);
background-position: left, right;
/*width: 80%;
height:80%;*/
background-size:45%,30%,cover;
background-repeat:no-repeat;
background-color:transparent;}
h1 { text-align: center;
font-size: 300%;
padding: 5% 0;
text-shadow: 3px 3px 3px #F4E8BC;
}
nav, main, aside { padding: 0 1em;
}
.imgFix { width: 25%;
height: auto;
}
nav ul { list-style-type: none;
font-size: 1.2em;
padding-left: 0;
}
/*nav a { text-decoration: none;}*/
nav a {
text-decoration: none;
background-color: #666666;
display:block;
text-align:center;
width:100%;
margin:1em auto;
border:solid .08em #339900
}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600;
background-color:#000000;}
footer { text-align: center;
font-size: 80%;
font-style: italic;
color: #003300;
padding: 2.5%;
}
#page{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#navBakImg{border: .1em solid #000000;
padding-right:1em;
background-image: url(../media/CardboardPlain0016_2_M.jpg);
font-size:90%;}
nav{-webkit-flex: 1;
flex: 1;
}
main{-webkit-flex: 7;
flex:7;
}
aside{-webkit-flex: 2;
flex: 2;
}
.tree { width:3em;
height: auto;
float:right;}
#media only screen and (max-width: 1024px) {
body { margin: 0; padding: 0; }
#wrapper { width: auto; margin: 0; }
h1 { font-size: 200%; }
nav li { padding: 0 0.5em;
font-size: 1.2em;
}
#page{-webkit-flex-direction: column;
flex-direction: column;
}
nav ul{display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
webkit-justify-content: center;
justify-content: center;
}
.imgFix { width: 30%;
height: auto;}
}
#media only screen and (max-width: 768px) {
nav{-webkit-order: 1;
order: 1;
}
nav ul{-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section{display:none;}
.imgFix { width: 35%;
height: auto;}
}
header, main, nav, footer, figure, figcaption { display: block; }
#headerH2Pos{position:relative;
left:26%;
}
EDIT: Looks like it's something else, as Michele says it works in Chrome but not IE when served from Linux.
Judging by your filenames, you may have just encountered a Windows => Linux gotcha:
The Linux filesystem is Case Sensitive, Windows is case insensitive.
You'll need to double check that you're using the right casing in your URLs, else the file won't be found when Linux goes to look for it.
I had to add this line and it was fixed:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I'm having two issues at once. One, with my new layout, it seems that when I zoom in enough, the x-scroll bar doesn't appear anymore (it used to before I went to the flex layout.) If I add "overflow: auto;" to the body style, then it will show up, but only if you scroll down to the very bottom, and that's not what I want.
Also, I tried a style where I could have the hover color go over the image instead of replacing it. (I used the after element.) It was working until I went to the flex layout.
(Also, is there a way to add scrolls to the other flex-item divs? I don't know what conditions will force the "overflow: auto;" to come into effect.)
[code]
<html>
<head>
<title> First Baptist Church of LaSalle </title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url" content="http://firstbaptistchurchoflasalle.com/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="First Baptist Church of LaSalle" />
<meta property="og:description" content="The website of First Baptist Church of LaSalle" />
<meta property="og:image" content="http://sprbc.org/images/banner1.jpg" />
<link rel="icon" href="./churchImage.png">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
.headerDiv
{
background-color: rgb(90, 7, 31);
width: 1000px;
height: 200px;
color: white;
}
body
{
background-color: beige;
//overflow: auto;
}
ul
{
height: auto;
width: 180px;
//background-color: #122213;
border-style: solid;
border-color: brown;
border-width: 10px;
list-style-type: none;
background-image:url(./greenFelt.jpg);
//border-image-source: url(./wood.jpg);
border-image-width: 10px;
border-image: url(./wood.jpg) 30 stretch;
margin: 0;
//float: left;
}
li
{
font-weight: bold;
font-style: italic;
width: auto;
// background-size: 100%;
text-align: center;
font-family: "Palatino Linotype", Serif;
position: relative;
background-image:url(./Crumpled_Paper_-_White.gif);
background-position:center;
background-repeat:no-repeat;
opacity: 1.0;
font-size: 12px;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 8px;
margin: 10px;
text-align: center;
background-size: 100% 100%;
}
li a
{
text-decoration: none;
color: black;
}
li a:hover:after
{
content:"\A";
//width:97%;
width: 92%;
height:88%;
background:rgba(143, 158, 208, 0.5);
position:absolute;
// top:0;
top: 2.5;
right: 0.0;
left: 2.0;
bottom: 0;
}
li:before
{
content: url(./pin.png);
display: block;
position: absolute;
left: 0px;
top: 0px;
}
li a:hover
{
//background-color: #2233dd;
// opacity: .9;
}
.flex-container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: auto;
height: auto;
}
.flex-item {
width: auto;
height: auto;
margin: 2px;
}
#middle
{
font-family: "Palatino Linotype";
font-size: 14px;
font-style: italic;
}
#right
{
background-color: grey;
}
#container
{
overflow: auto;
}
</style>
<div style="width: 1000px; height: auto; margin: 0 auto;" id="container">
<div class="headerDiv"> <center><h1> First Baptist Church of LaSalle </h1></center>
</div>
<div style="margin: 0; width: 1000px; border: 1px solid blue; height: auto; background-color: tan;" class="flex-container">
<div class="flex-item w3-card-4">
<ul style="width: auto;">
<li> Home</li><br/>
<li> About Us</li><br/>
<li> Pastoral Staff </li><br/>
<li> Sunday School </li><br/>
<li> Services & Directions</li><br/>
<li> Calendar </li><br/>
<li> Activities </li><br/>
<li> Contact Us </li><br/>
<li> Sermons </li><br/>
<li> Weekly Bulletin </li><br/>
</ul>
</div>
<div class="flex-item" id="middle">
Dear Friends, <br><br/>
<p>Thank you for taking the time to visit our website for First Baptist Church of LaSalle. We invite you to take the time to look at the site and get to know a little bit about us. </p>
<p>First Baptist Church was started in 1839 and has been preaching the Word of God without compromise ever since. The church moved to its current location in 1976. </p>
<p>As pastor of the church, I have had the privilege of working with many wonderful people here at the church. God has blessed us with a great staff and many wonderful people in the congregation.</p>
<p>It is exciting to be here and to see what God is doing now and is going to do in the future. First Baptist Church is a church that cares about people and a place you can make home.</p>
<p>I would encourage you to come and see for yourself what God is doing here. My family and our church would love to see you.</p>
In Christ, <br></br>
Wesley Waddle, Pastor
</div>
<div class="flex-item w3-card-4" id="right">
<U>Contact Information </U><br></br>
<B> PHONE: </B> 815.223.1333 <br></br>
<B> FAX: </B> 815.223.1334 <br></br>
<br></br>
<B>ADDRESS: </B> 200 - 24th Street <br></br>
P. O. Box 1043 <br></br>
LaSalle, IL 61301 <br></br>
<br></br>
</div>
</div>
<footer style="background-color: gold; width: 1000px; height: 200px; margin: 0;">
<center> <div style="font-weight: bold;"> © 2017 - First Baptist Church of LaSalle </div> </center>
<center><div class="flex-container">
<div class="fb-like flex-item" data-href="https://www.facebook.com/First-Baptist-Church-of-LaSalle-106794612807864/" data-width="80" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus flex-item" data-action="share" data-width="150" data-href="http://firstbaptistchurchoflasalle.com/"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<div style="color: black;" class="flex-item">Tweet <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</div> </center>
</footer>
</div>
</body>
</html>
[/code]
For the hover problem, it's not lining up to fully fit the image. It's a big too tall on the sides at the top. (Originally, "Top: 0; Left: 1.8; Right: 0; Bottom: 0; height: 100%; width: 97%;" worked, but now it doesn't with the new layout.) (So I know there should be a way to do it with just one style for all the li elements instead of having to having varying styles for each li element.)
Also, now that I recall, after I added the flex item to contain the UL and added the flex item to the flex container, I had to change my background-size: 100%; to background-size: 100% 100%;
to get it to fit all the words on the image and not go outside the image.
As for the scrolls, for some reason, the only ones I can get to show up, other than using overflow: scroll; is overflow: auto; for body, and that only shows the x-scroll if you scroll to the very bottom. (Interestingly, the y-scroll seems to be working fine.) Applying overflow: auto; to #container doesn't appear to work.
Okay guys, so here's the problem, I have a set of links (3 in total, titled "News", "About" and "Contact", I wish to perfectly center these, allowing them to stay directly in the center of the users screen beneath my logo. Here's my code;
HTML;
<!DOCTYPE html>
<html>
<head>
<title>BHD - BlackHawk Drift</title>
<!--Scripts-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="scripts/fadein.js"></script>
<script src="scripts/buttonfade.js"></script>
<link rel="stylesheet" type="text/css" href="css/stylemain.css">
<!--end scrpts-->
<!--setting the basic styles-->
<style>
a:link {
color: #FAFAFA;
}
</style>
</head>
<body>
<!--Providing the text-->
<img class="displayed" src="img/text.png" alt="#blackhawk drift">
<!--end-->
<!--basic mainpage links-->
<div class="link">
<p1>About</p1>
<p1>News</p1>
<p1>Contact</p1>
</div>
</body>
</html>
CSS;
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 400px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 23%;
position: relative;
}
.link {
display: block;
padding: 2px;
letter-spacing: 6px;
position: relative;
margin-left: auto;
margin-right: auto;
}
And here's a visual image of what I am trying to accomplish...
EDIT: I have managed to do this!:) I just added "text-align: center;" to my class in CSS.
Just add text-align: center; to the css class ".link"