I needed to overlay text on an image, so I used CSS for this purpose. However, as I incorporated Bootstrap and hesitated to include absolute positioning in the CSS file, I faced issues with centering the text when resizing the image. To tackle this problem, I created a JQuery script to handle width changes, but it's not functioning properly.
WidthChangeScript.js
if($(window).width() > 500){
$( "#FactionsWidthtoPos" ).css( "top","255px" );
}
index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GrassCraft</title>
<!----Bootstrap---->
<link href="CSS/bootstrap.min.css" rel="stylesheet">
<link href="CSS/textoverimage.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Forums</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Shop<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Factions Grass</a></li>
<li><a id="FctQu" href="#" >Factions Quartz</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">How it works</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!---Site body--->
<div id="imgTop" class="imageBehindText">
<img src="http://placehold.it/1920x800" class="img-responsive" width="1980" height="800">
<h2 id="FactionsWidthtoPos" class="textOverImage" >Factions</h2>
</div>
<div class="placeHolderImage">
<img src="http://placehold.it/1920x100" class="img-responsive" width="1980" height="800">>
</div>
<div class="container">
<div class="jumbotron">
<h1 id="abtUs" > GrassCraft</h1>
<p id="abtUsTxt" >A new Factions server made by 2 young enthusiasts. Any financial support would mean alot</p>
</div>
</div>
<!----Bootstrap required JQuery---->
<script src="jquery.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>
<script src="JavaScript/WidthChangeScript.js"></script>
</body>
textoverimage.css
.imageBehindText {
position: relative;
width: 100%; /* for IE 6 */
}
.textOverImage {
position: absolute;
top: 100px;
text-align: center;
width: 100%;
color: #f0f8ff;
text-decoration: underline;
}
.placeHolderImage {
opacity: 0;
}
This constitutes the majority of the code for this website. If you have any suggestions for optimizing the code, feel free to share!