This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 8 years ago.
I am trying to display some text over an image : http://jsfiddle.net/5AUMA/31/
I need to align this text at the bottom part of the image
I tried putting this in css:
.head_img p {
position: absolute;
left: 0;
width: 100%;
vertical-align:bottom;
}
but this doesn't work ...
.............
Secondly I want this to be scalable with the screen width ... if width less than that of a 13" laptop .. remove the image but keep the text
How do i do that
Try this:
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position:relative;
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom:5px;
margin:0;
padding:0;
}
#media (max-width: 1366px) {
.head_img img { display:none; }
}
I added position:relative; to the .head_img class and positioned the p element absolutely with a bottom of 5px.
Then added a media query to hide the image once the screen width goes below 1366px. You will have to adjust that breakpoint, but I believe it's a common screen width for 13" laptops.
Updated fiddle: http://jsfiddle.net/5AUMA/33/
http://jsfiddle.net/5AUMA/32/
your markup wasn't correctly set (moved the paragraph in the same div that contains the image)
<body class ="body">
<div class ="head_img">
<div style="text-align:center;"><img style="min-width:50%; min-height:60%;" src = "http://i.imgur.com/H56PB85.jpg"/>
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
also look for position:relative on the container div to make things work on all browsers
body{
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/
font-size:100%;
font-family: 'Maven Pro', sans-serif;
line-height:1.4em;
min-height:100%;
/*padding-left: 5%;*/
background-color: #fdfdfd;
}
.head_img{
margin-top:10%;
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
position: relative; /* HERE */
}
.head_img p {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
color: white;
}
You need to make couple of changes to your css to make it work as follows.
.head_img p {
position: absolute;
left: 0;
width: 100%;
top: 0;--> Added
color: white;--> Added
}
.head_img{
<--Margin Removed-->
font-size:1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align:center;
}
WORKING FIDDLE
Now to make your image to hide in particular width you can use media queries something like this
#media (max-width: 768px) {
.head_img img{
display:none;
}
}
try this
body {
color: #202020;
font-size: 100%;
font-family: 'Maven Pro', sans-serif;
line-height: 1.4em;
min-height: 100%;
background-color: #fdfdfd;
}
.head_img {
margin-top: 10%;
font-size: 1.5em;
line-height: 1em;
font-weight: bold;
font-style: italic;
color: #000000;
text-align: center;
position: relative;
}
.head_img p {
left: 0;
width: 100%;
position: absolute;
bottom: 5px;
margin: 0;
color: #fff;
}
<body class="body">
<div class="head_img">
<div style="text-align:center;">
<img style="min-width:50%; min-height:60%;" src="http://i.imgur.com/H56PB85.jpg" />
</div>
<p>display this text over the image
<br>and at the bottom part of the image</br>
</p>
</div>
</body>
i have added
top: 394px;
color: #fff;
in .head_img p jsfiddle
body {
background-color: #fdfdfd;
color: #202020;
font-family: "Maven Pro",sans-serif;
font-size: 100%;
line-height: 1.4em;
min-height: 100%;
}
.innerimg {
background: url("http://i.imgur.com/H56PB85.jpg") no-repeat scroll center center rgba(0, 0, 0, 0);
border: 2px solid;
height: 500px;
width: 500px;
}
.head_img {
color: #000000;
font-size: 1.5em;
font-style: italic;
font-weight: bold;
line-height: 1em;
margin: 0 auto;
text-align: center;
width: 500px;
}
.head_img p {
display: table-cell;
height: 480px;
text-align: center;
vertical-align: bottom;
width: 500px;
}
<body class ="body">
<div class ="head_img">
<div class="innerimg" style="text-align:center;">
<p> display this text over the image <br> and at the bottom part of the image</br></p>
</div>
</div>
</body>
add HTML tags
<h2><span>display this text over the image <br> and at the bottom part of the image</span></h2>
CSS
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
i have updated the code in this FIDDLe
Related
for some reason my text (link) is being pushed outside of the div container. I am wanting the text to be inside the div, and JUST the text to me clickable, not the entire div.
HTML
<div class="title">
Work
</div>
CSS
.title {
position: absolute;
background-color: red;
z-index: 5;
height: 15em;
}
.title a {
height: 15em;
font-size: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
When Inspecting in a browser, the '' is extremely large for some reason.
Thanks.
.title {
position: absolute;
background-color: red;
z-index: 5;
height: 15em;
}
.title a {
height: 15em;
font-size: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<div class="title">
Work
</div>
The line-height for a font that is 150px is very large and is causing the overflow. Play around with line-height to get the effect you desire:
.title a {
height: 15em;
font-size: 150px;
line-height: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
https://jsfiddle.net/srza8bhk/
remove height:15em from anchor tag. and set it's line-height should be less
like:
.title a {
font-size: 150px;
line-height: 1px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
I want the text to shrink as the image shrinks. e.g. maintain the same ratio in size relative to the image. I've tried making the text disappear but it simply isn't what I want.
The CSS:
.header{
padding: 0.16px 16px;
position: relative;
box-sizing: inherit;
display: block;
font-size: 15px;
line-height: 1.5;
text-size-adjust: 100%;
content: "";
display: table;
clear: both;
font-family: "Montserrat", sans-serif;
}
.top-left{
padding: 24px 48px;
margin-left: 16%;
position: absolute;
left: 0px;
top: 0px;
box-sizing: inherit;
display:block;
font-size: 15px;
line-height: 22.5px;
text-size-adjust:100%;
}
.header-image{
vertical-align:middle;
border-style: none;
box-sizing: border-box;
width:65%;
height:auto;
margin:30px 250px;
}
#media screen and (max-width: 600px) {
.header-image {
margin-left: auto;
margin-right: auto;
display: block;
width:65%;
}
}
.new-arrivals{
position: absolute;
display:block;
left: 0;
top: 0;
margin:10px 5px 10px 0;
font-size: 4vw !important;
color:black;
padding: 50px 100px;
font-weight: 400;
line-height: 60px;
}
.shop-now{
border:none;
display:inline-block;
padding:12px 24px;
margin: 260px 50px;
vertical-align:middle;
overflow:hidden;
text-decoration:none;
color:white;
background-color:black;
text-align:center;
white-space: nowrap;
font-size: 18px
}
.shop-now:hover{
background-color: #ccc;
color: black;
border-style: ridge;
border-color: black;
border-width: 1px;
}
.designs{
position: absolute;
left: 0;
top: 0;
font-size: 20px !important;
font-family: "Montserrat", sans-serif;
margin: 150px 0;
color:black;
padding: 24px 100px;
font-weight: 400;
}
The HTML:
<div class="header">
<img class="header-image" src="img/jeans.jpg" alt="Jeans">
<div class="top-left">
<h1 class="new-arrivals">New arrivals</h1>
<p><h3 class="designs">Our new season collection is here</h3> </p>
<p>SHOP NOW</p>
</div>
</div>
If you want the text to be responsive as the image, you need to set h1 element style in your CSS file. For example:
.new-arrivals {
font-size:clamp(2em, 4vw, 4em); /* set min, ideal value, max */
}
I was trying to do the same thing for my portfolio. And I end up putting my text imbedded inside the image by using the ms paints. The text inside image can't be responsive if it's not of part of image. I hope that help.
You can accomplish this by setting both the width of the image and the font-size based on the width of the screen. Below is an example of that.
This question is similar, and the answers there may be helpful to you as well.
body {
margin: 0;
}
.container {
position: relative;
color: white;
width: fit-content;
}
.top-left {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 3vw;
}
img {
width: 100vw;
}
<div class="container">
<img src="https://html.com/wp-content/uploads/flamingo.jpg">
<div class="top-left">
<h1 class="new-arrivals">New arrivals</h1>
<h3 class="designs">Our new season collection is here</h3>
<p>SHOP NOW</p>
</div>
</div>
If you don't need the image to scale with the screen width, you can simply set a fixed pixel size for both the image and the text.
CSS for the Text:
.text {
font-size: 15vw;
}
CSS for the Image
img {
width: 10vw;
max-width: /* Set this to 10-15cm if you want to show you page on
mobiles too */
min-width: /* Set this to 8-10cm if you want to show you page on
mobiles too */
}
try these and adjust
font-size: clamp(1rem, 3vw, 2rem)
font-size: max(1rem, 3vw)
font-size: calc(200% + 2vw)
I have a problem with a to fixed divs in the right and left bottom corner. On a desktop they look good, the divs are in the corner. However, when on mobile, the divs are fixed and overlap the rest of the content. I tried a margin-bottom but that didn't fix the problem.
What I want is that the two info divs are fixed but when you are on mobile that there is a gap between the info divs and the div class="wrap".
Here's my html
<div class="wrap">
<h1 class="titel">Media Media B.V.</h1>
</div>
<div class="info container">
<div class="row">
<div class="address col-md-6">
<p><strong>Media Media B.V.</strong><br/>
Vriendsgracht 77<br/>
2542AH Utrecht<br/>
The Netherlands</p>
<p><abbr title="Phone">Skype:</abbr> john.doe<br/>
info#media.nl</p>
</div>
<div class="vat col-md-6">
<p><abbr title="Chamber of Commerce">CoC:</abbr> 4444444<br/>
<abbr title="Value Added Tax">VAT:</abbr> NL444444444</p>
</div>
</div>
</div>
This is the css i used
body {
background-color: #1A4C62;
height: 100%;
}
.wrap {
background-color: blue;
margin-bottom: 7.5%;
position: relative;
}
.titel {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
padding-top: 7.5%;
}
.titel2 {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
}
.logo {
margin: 0 auto;
}
.ondertitel {
color: #fff;
font-family: 'Lato', sans-serif;
text-align: center;
}
.info {
color: #fff;
font-family: 'Lato', sans-serif;
}
div.info {
width: 100%;
}
div.info div p {
margin: 2px 0px 5px 0px;
}
div.info div strong {
display: inline-block;
font-size: 13px;
}
div.info .address {
position: fixed;
bottom: 0;
left: 0;
width: 150px;
padding: 10px 25px 10px 15px;
border: 1px solid #fff;
}
div.info .vat {
position: fixed;
bottom: 0;
right: 0;
width: 150px;
padding: 10px 15px 10px 25px;
border: 1px solid #fff;
}
You use only col-md rules, set col-sm and col-xs attributes to your HTML and it should solve the problem for mobiles
I am trying to add a div to the side of my wrapper. It will be a link / button.
I want it to be able to slide up and down, fixed to the right hand side border when scrolling.
The button is:
#booknow {
position: absolute;
right: 0;
margin-left:25px;
text-align:center;
font-family: 'Raleway',sans-serif;
font-size:22px;
color:#ffffff!important;
font-weight:700;
line-height:26px!important;
text-transform:uppercase;
}
And the inner wrapper (Where the border is), is:
.wrapper_inner{
position:relative;
z-index:10!important;
padding:30px!important;
background:#fff!important;
border:1px solid #D4D4D4!important; }
HTML:
<div class="wrapper">
<div class="wrapper_inner">
<div id="booknow">
Book <br> Now
</div>
</div>
</div>
At the minute I have this:
If I set it to fixed it slides up and down but it won't position perfectly to the outside of .wrapper_inner.
The HTML wasn't that helpful, so I just threw something together. The color scheme is to display the elements. I removed .inner_wrapper and added the surrounding layout so it would be possible to demonstrate that #booknow floats. If you click the #booknow it'll scroll down to a faux form at the bottom.
Demo: https://plnkr.co/edit/qACqW4O4rJn7YHoPRWLy?p=preview
Full screen: https://run.plnkr.co/njw73AIIIuHXEooM/
Relevant CSS
body {
position: relative;
overflow-y: scroll;
overflow-x:hidden;
font: 500 16px/1.4 'Arial';
min-height: 100vh;
}
.spacer {
position: absolute;
bottom: -200px;
height: 60%;
}
#booknow {
position: fixed;
top: 30px;
right: 0;
float: right;
margin-left: 25px;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #ffffff;
font-weight: 700;
line-height: 26px;
font-variant: small-caps;
z-index: 10;
background: #fc3;
padding: 10px;
width: 50px;
}
.wrapper {
position: absolute;
top: -110px;
margin: 25px;
padding: 5px 10px;
width: 100%;
border: 3px double grey;
min-height: 70px;
background: #eff999;
}
I am busy on this page (http://s.nogax.ga/editor-css.html) and I am trying to make a full height sidebar.
Basically, the div sidebar should always extend to the bottom of your screen.
(and with it the black line on the right of it)
JSFiddle
html
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>
css
html, body {
background-color: grey;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
heigth: 100%;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
heigth: 20px;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
}
.content {
position: absolute;
width: 100%;
heigth: 100%;
}
.sidebar {
width: 15%;
position: absolute;
background-color: grey;
border-right: 2px solid;
}
.editor {
position: absolute;
width: 84.5%;
right: 0;
background-color: grey;
}
You can just make the sidebar position:fixed if you want it to always be displayed on the side:
.sidebar {
height: 100%;
position: fixed;
}
Here is an example
Apply following css will make output as you expected:
.sidebar {
width: 15%;
position: fixed;
background-color: grey;
border-right: 2px solid;
bottom:0;
}
Check https://jsfiddle.net/r8u7pkd6/2/.
For infos and nowdays browsers, you could use display:flex; too.
BTW: You misstyped height != heigth
#font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
html, body {
background-color: grey;
margin: 0;
width :100%;
height:100%;
flex-direction:column
}
body,.content {
display:flex;
}
.main-nav {
background-color: black;
color: white;
font-family: 'Noto Sans', sans-serif;
font-size: 150%;
margin: 0;
}
.content {
flex:1;
}
.sidebar {
width: 15%;
background-color: grey;
border-right: 2px solid;
}
.editor {
flex:1; /* will use remaining space*/
/*width: 84.5%;
right: 0; useless here*/
background-color: lightgrey;
}
<div class='main-nav'>
Site Name Editor
</div>
<div class='content'>
<div class='sidebar'>
Page Names
</div>
<div class='editor'>
Optie 1 <br>
Optie 2 <br>
</div>
</div>