My issue revolves around a DIV tag adorned with a background image:
<a href="#">
<div class="pagebar jquery">
<h1>JQuery Demonstrations</h1>
</div>
</a>
The CSS applied to this element is as follows:
.pagebar {
left: 0%;
right: 0%;
height: 200px;
border:1px solid black;
clear: both;
text-decoration:none;
font-size:x-large;
-webkit-filter: blur(0px);
filter: blur(0px);
margin-top:20px;
}
.pagebar:hover {
border:1px solid black;
-webkit-filter: blur(1px);
filter: blur(1px);
}
My aim was to align the text 'JQuery Demonstrations' to the right side of the background image. However, when attempting to adjust the code in the jquery class like so:
.jquery {
background-image: url(file:///C|/Users/James/Desktop/Website/Images/JQuery.jpg);
background-repeat:no-repeat;
background-size: 70% 100%;
background-position:left;
}
.jquery h1 {
width: 40%;
position:relative;
top: 5%;
bottom: auto;
right: auto;
left: 50%;
}
Using the values 'left: auto' and 'right: 10%', the text ends up disappearing off the left side of the div. Is there something I am overlooking or perhaps formatting incorrectly? I've experimented with adjusting the width since it initially filled the whole div width, however, no visible changes have occurred.