I want my text to appear over an image, at the bottom of the image. I can get it to work but when I scale the page, the text moves out of the div (below the image). I want it to stay in the same place when i scale the page.
HTML
<div class="header">
<img src="images/ct.jpg" class="info-image">
<p class="HeaderText">Canterbury Tales<p>
</div>
CSS
.info-image {
width:100%;
position:relative;
}
.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
}
website: explorecanterbury.co.uk
the div can be found by clicking on canterbury tales building
You have a few problems:
You need to close <p> with </p>.
Use position: relative on the .header.
Like this?
.header {
position: relative;
width: 500px;
}
.info-image {
max-width: 100%;
position: relative;
display: block;
}
.HeaderText {
position: absolute;
top: 50%;
text-align: center;
left: 0;
right: 0;
transform: translate(0, -50%);
font-size: 3em;
margin: 0;
padding: 0;
}
<div class="header">
<img src="//placehold.it/500" class="info-image">
<p class="HeaderText">Canterbury Tales</p>
</div>
Preview
Give the image a lower z-index then the text:
.info-image {
width:100%;
position:relative;
z-index: 1;
}
.HeaderText {
position:absolute;
left:35px;
bottom: 10px;
font-size: 3em;
z-index:2;
}
If that doesn't work, try giving the image a position of absolute, and the text a position of relative.
Related
I am attempting to position my '.store' class 10px above my #linkplaceholder div and my '.lastseen' class 10px below my #linkplaceholder div. Is this possible?
I would imagine this could be done with position absolute & relative, but when I change my #linkplaceholder to position: absolute, it is no longer centered horizontally like it should be. Also, the #linkplaceholdering div's size needs to stay dynamic at 20% of the viewport like it is.
Currently I just have the '.store' and '.lastseen' classes positioned by giving store a top margin percentage and lastseen a bottom margin percentage in order for you to see the idea I'm going for. These are sometimes in the general area of where they need to be, but on different devices they can be way off. That's why I need store to be positioned exactly 10px above and last seen to be positioned exactly 10px below so this is fixed and always accurate.
JSFiddle showing my code: https://jsfiddle.net/1ms9fk63/
body {
background: black;
}
#container {
background-color: black;
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#linkplaceholder {
margin: 0 auto;
z-index: 10000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
}
#linkplaceholder img {
width: 100%;
}
.store {
top: 0;
margin-top: 21.5%;
}
.lastseen {
bottom: 0;
margin-bottom: 21.5%;
}
.lastseen, .store {
position: absolute;
width: 100%;
text-align: center;
}
.lastseen a, .store a {
font-family: neue-haas-grotesk-text, sans-serif;
color: #ffffff;
font-weight: 400;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 15px;
}
.lastseen a:hover, .store a:hover {
text-decoration: underline;
}
<div id="container">
<div id="linkplaceholder">
<a href="/">
<img src="images/image.svg" alt="" />
</a>
</div>
<div id="navcontainer">
<div class="store">STORE</div>
<div class="lastseen">LAST SEEN</div>
</div>
</div>
I would suggest using JavaScript since I don't think something like this can be accomplished just with CSS. Check out this snippet I created.
NOTE: I had to use 20px from the top of the div because if I used 10px the text would get inside the image.
This is the HTML code:
<body>
<div id="container">
<img src="images/coffeebackground1.jpg" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
This is my CSS code:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index:100;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: red;
z-index:1000;
position: relative;
color: red;
}
What I did was I put an image as a background and I want to put the topnav div lying on top of the background image. However, it seems like my code is not working.
The text is not visible because both the background color and the foreground color are set to red, so the element just appears as a red block.
Additionally, the text doesn't appear above the image because it is positioned as relative which means it will be positioned relative to its natural position according to the layout. As you haven't specified an offset in the CSS, it actually just appears in its normal position, which is just below the image.
If you change the position to absolute then its position will be relative to #container instead which I think makes more sense in this case. You can then move it to be above the image by setting a position, like this:
#topnav {
background-color: white;
z-index:1000;
position: absolute;
left: 100px;
top: 20px;
color: red;
}
Background and font color are same, that's why its not appearing
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
opacity: 0.7;
z-index: 100;
position: relative;
}
#container img{
top:20px;
position: relative;
}
#topnav {
width: 100px;
height: 20px;
background-color: white;
z-index: 1000;
position: absolute;
color: red;
top:0;
}
<body>
<div id="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
<div id="topnav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
</body>
Remove position relative from #container and set position absolute in #topnav.
or
Remove img tag from #container and set background image on #container in css like that:
`
background: url("images/coffeebackground1.jpg");
background-repeat: no-repeat; //if you don't want to repeat image
background-size: auto; //try others parameters to fit your background
*{
margin:auto;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: white;
z-index:100;
top:20px;
position: relative;
}
#topnav {
z-index:1000;
position: absolute;
left: 10px;
top: 10px;
color: #FFF;
font-family:arial;
font-size:30px;
}If you want to change position of 'Home' please change #topnav:{ left: 70px}. If you want to increase more please left: 80px.. and so on. If you want to decrease please less #topnav{ left:30px.. and so on.}
I am creating a navbar in my website and I want my logo to show next to my site name within the navigation bar, but it doesn't want to cooperate. In the code below is my html with the image inside of my nav bar.
Below is what my css looks like. I tried all of the different position types and I tried to set the navimage's margin and padding.
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
Any ideas?
The simplest way is to put the image inside your paragraph.
<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>
Size the image as needed.
Your position: absolute prevents the images from appearing as you want, try removing this and adding display:block so that the elements will appear next to each other. You'll probably want to change the css of your image to make it smaller.
Try something like this. Also the image is larger then 50 px so it automatically goes below the nav bar because it can't fit inside. Also, you have navimage title set to class in your html, but its written as an id in your css. ids are with # and class should be .navimage
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
float: left;
}
.navimage {
float:left;
}
<div class="navbar">
<div id="navtitle"><p>Rainforest</p></div>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
</a>
</div>
</div>
Concept:
Use of float property.
The Code:
Use float:left; for navbar and its elements.This will allow them to overlap each other.
Use position to position them.
Note: I gave Id to the img itself. It is always easier to manipulate the image directly
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
float:left;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
float: left;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
float:left;
}
#logoimg{
height: 50px;
position: absolute;
left: 2px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
You set an absolute positioning of the continer, so you should do in this way:
.navbar {
width: 100%;
background-color: #2ecc71;
z-index: 1;
position: absolute;top:0;left:0;
}
#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
margin-top:10px;
}
#navimage, img {
display:inline;
float:left;
width:30px;
height:40px;
padding:10px
}
http://jsfiddle.net/u3upgedx/
A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.
But what if the container needs to be absolute??
I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.
Here is a fiddle in which the image isn't ignoring the wrapper's width
.splash_image {
position: relative;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
position: absolute;
}
.splash_title {
color: red;
position: absolute;
}
.wrapper {
width: 50%;
}
<div class="wrapper">
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
<div class="splash_title">Test title to go here on image</div>
</div>
</div>
You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:
.splash_image{
position:absolute;
left:0;
top:2%;
height:600px;
width:100%;
overflow: hidden;
z-index: 1;
}
.splash_image img{
width:100%;
}
.splash_title{
color:red;
z-index: 88;
position:absolute;
top:0;
left:0;
}
Updated Fiddle
There are multiple ways to accomplish this. Here is a simple answer:
.splash_image {
position: absolute;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
}
.splash_title {
color: red;
position: absolute;
z-index: 2;
}
.wrapper {
width: 50%;
}
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
</div>
<div class="wrapper">
<div class="splash_title">Test title to go here on image</div>
</div>
https://jsfiddle.net/jonnysynthetic/2vqgab7t/
However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.
.splash_image{
left: 0;
top: 2%;
overflow: hidden;
width: 100%;
z-index: 1;
height: 100%;
}
.splash_image img{
width:100%;
position:absolute;
}
.splash_title{
color: red;
z-index: 88;
position: absolute;
top: 50%;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 50%;
height: 150px;
position: relative;
}
https://jsfiddle.net/2tpbx12x/5/
try this:
.splash_image img{
width:100%;
position:fixed;
}
So, in my HTML, I've put an Image which is responsive (changes size when browser window is changed). Now, on the top of it, I want to put my title (or you can say text). But the image is only appeared as a strip. It is displayed as a whole when you re-size the window very small. And when I change my text's position to absolute over the image which position is relative, everything disappears.
Here's my HTML:
<style>
.large-header {
position: relative;
width: 100%;
background: #333;
overflow: hidden;
background-size: cover;
background-position: center center;
z-index: 1;
}
.candh_container .large-header {
background-image:url('http://i.imgur.com/vkfDo1I.jpg');
}
.main-title {
/* position: absolute; */
margin: 0;
padding: 0;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
}
.container_candh .main-title {
text-transform: uppercase;
font-size: 4.2em;
font-family:Montserrat;
}
</style>
<div class="candh_container">
<div class="large-header">
<h1 class="main-title">Candh Inc.</h1>
</div>
</div>
Here's the fiddle : http://jsfiddle.net/ysksx5nu/
The problem is, that you used your image as a background, so it won't take any space. You have to scale the image itself to 100% width, and specify no height, so the ratio is kept.
<style>
.bg_image {
width: 100%;
}
.candh_container {
position: relative;
}
.main_title {
position: absolute;
color: #000000;
text-align: center;
margin-right:auto;
margin-left:auto;
z-index: 1;
width: 100%;
top: 0px;
}
</style>
<div class="candh_container">
<img src="http://i.imgur.com/vkfDo1I.jpg" class="bg_image" />
<h1 class="main_title">Candh Inc.</h1>
</div>
Check this: http://jsfiddle.net/ysksx5nu/1/