I'm trying to add a Logo on top of an Image. I tried to overlap these two images but it did work for me.
The second image was placed next to the first image instead. Please help me sort this thing out
This is for a website I'm trying to work on using HTML and CSS.
HTML file:
<section id="home">
<div class="backgroung" >
<img src="Images/banner1.jpg" style="width: 100%" class="bg">
<img src="Images/yellow.png" class="logo">
</div>
</section>
CSS file:
#home{
position: relative;
top: 0;
bottom: 0;
}
.bg {
position: relative;
top: 0;
bottom: 0;
z-index: 1;
}
.logo{
position: absolute;
top: 20px;
bottom: 30px;
height: 250px;
width: auto;
z-index: 2;
}
I expected this to be overlapping with each other.
I hope it's not because both images are not of the same file types.
You should also set the left property of the logo:
.background {
display: inline-block;
position: relative;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
<section id="home">
<div class="background">
<img src="https://picsum.photos/id/583/300/300" class="bg">
<img src="https://picsum.photos/id/237/100/100" class="logo">
</div>
</section>
You can also use multiple background images:
.background {
width: 300px;
height: 300px;
background:
url(https://picsum.photos/id/237/100/100) no-repeat center,
url(https://picsum.photos/id/583/300/300);
}
<section id="home">
<div class="background">
</div>
</section>
Related
I am make a banner with Bootstrap 3, but having problems keeping the aspect ratio on the banner image.
When I see the image on small viewports, the image is getting squeezed. Can anybody help me with a solution on this?
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content img {
width: 100%;
height: 80vh;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
You could use object-fit: cover to have your image fill your available space while maintaining its aspect ratio. You would need to put the 80vh value on the image container.
.image-wrap {
position: relative;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content {
height: 80vh;
}
.img-content img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
</div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
You may want to adjust the banner-content so it lines up better on small screens.
When you set your width and height (by relative) together, you force the image size to change together with your screen. For your text to be not aligned in the centre, is due to your text should be within the same division as your image so that they are able to refer to the same initial point when positioning.
<link rel="stylesheet" href="https://use.typekit.net/nai6cyj.css">
<style>
/**** Banner ****/
.image-wrap {
position: relative;
width: 100%;
overflow-x: hidden;
}
.banner-content {
position: absolute;
z-index: 99999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
font-size: 1.5em;
color: #fff;
line-height: 1.5;
}
.img-content > img {
width: 100%;
display: block;
}
</style>
<!-- Banner -->
<div class="image-wrap">
<div class="img-content">
<img src="https://www.bmw.dk/content/dam/bmw/marketNORDICS/common/All-models/BMW-i/i4/2021/BMW_G26_BEV_i4_Stage-front_2_1680x756.jpg.asset.1621330813802.jpg" alt="">
</div>
<div class="overlay"></div>
<div class="banner-content">
<h1>MAKE THE BEST OF YOUR HTML EXPERIENCE WITH YOUR DAILY LIFE</h1>
</div>
</div>
I placed an image of a map and put two little markers on it (I replaced them simply with letters for the time being). The issue is, that on the mobile view they are totally in a different position than on desktop view.
Can some please explain me how can I resolve this issue and why did it happen?
<html>
<body>
<style>
.container{
width: 70%;
margin: 0 auto;
position: relative;
}
#map > img{
max-width: 100%;
max-height: 100%;
}
.marker{
height: 1.5em;
font-size: 10px;
width: 1.5em;
position: absolute;
cursor: pointer;
}
.europe{
top: 25%;
left: 50%;
}
.canada{
top: 25%;
left: 25%;
}
</style>
<div class="container">
<div id="map">
<img src="https://linmark.com/assets/site/images/network/map.png" />
<div class="marker europe">A</div>
<div class="marker canada">B</div>
</div>
</div>
</body>
</html>
My goal is to make the markers appear on the same place on both mobile view and desktop.
I think you just need a transform:translate to keep the markers "centered" in their original positions.
Recall, your elements are a fixed size but your positioning and image is % based.
.container {
width: 70%;
margin: 0 auto;
position: relative;
}
#map>img {
max-width: 100%;
max-height: 100%;
}
.marker {
height: 1.5em;
font-size: 10px;
width: 1.5em;
position: absolute;
transform: translate(-50%, -50%); /* this */
cursor: pointer;
}
.europe {
top: 25%;
left: 50%;
}
.canada {
top: 25%;
left: 25%;
}
<div class="container">
<div id="map">
<img src="http://linmark.com/assets/site/images/network/map.png" />
<div class="marker europe">A</div>
<div class="marker canada">B</div>
</div>
</div>
Codepen Demo
I want to put the heading in the center of the image I try to put image then heading then give the heading negative margin but when I did that the other element go up and make it look bad
<div>
<img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image "
<h2>i want to put this heading in the center of the above image </h2>
</div>
Like this?
div {
background-image: url("https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg");
height: 300px;
position: relative;
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
<div>
<h2>i want to put this heading in the center of the above image </h2>
</div>
Try something like this
.image {
position: relative;
float: left;
}
.image h2 {
position: absolute;
z-index: 2;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="image">
<img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image " />
<h2>i want to put this heading in the center of the above image </h2>
</div>
The other method is to use flex and background-image.
.bg {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("http://placehold.it/200x200");
background-repeat: no-repeat;
}
<div class="bg">
<h1> TEXT </h1>
</div>
Use position: absolute on the <h2> and position: relative on the div.
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
margin: auto;
height: 20px;
}
<div class="parent">
<img src="https://res.cloudinary.com/dte7bat2g/image/upload/v1488492447/sample.jpg" alt="rose image" />
<h2 class="child">i want to put this heading in the center of the above image </h2>
</div>
Like this?
h2{
padding:20%;
}
<body background="http://wallpapercave.com/wp/N3BgXEI.jpg">
<div>
<h2>I want to put this heading in the center of the above image </h2>
</div>
</body>
I'm learning HTML & CSS so I'm trying to copycat Coder Manual.
I made a div for the background (I'll just use one color for now) and another div for the content of that first blue section with the logo, navigation, etc..
However, I can't make the content div overlay the background div without using something like:
#content {
position: absolute;
top: 0;
}
but that prevents me from centering the content div using:
#content {
width: 50%;
margin: 0 auto;
}
What should I do in such situation?
Edit: here's the html:
<!DOCTYPE html>
<html>
<head>
<title>CM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
<div id="blue-div">
</div>
</body>
</html>
You can use transform to center it like this:
1-With position: absolute in an element with a known width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
margin-left: -20px; /*the half width */
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
2- With position: absolute in an element with an unknown width
.center{
height: 40px;
padding: 20px 0;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
3- Centering even vertically
.center{
height: 80px;
background: #ddd;
position: relative;
}
.center img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
<div class="center">
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" width="40px" height="40px" alt="LOGO">
</div>
Personally, I do something like this:
.bg {
width: 100%;
}
.bg-blue {
background-color: blue;
}
.content {
text-align: center;
}
<div class="bg bg-blue">
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
</div>
but if you need to keep the divs seperate:
#BgBlue {
position: absolute;
top: 0;
z-index: -1;
height: 50px;
width: 100%;
background-color: blue;
}
.content {
text-align: center;
}
<div id="BgBlue">
</div>
<div class="content">
<img alt="Coder Manual" src="https://codermanual.com/wp-content/uploads/2015/01/logo.png">
</div>
How do I center a text over an image in css?
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
I want to do something like the one below but I'm having difficulties, here's my current css
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
When I use background-image I do not get any output from html2pdf:
<style>
#image_container{
width: 1000px;
height: 700px;
background-image:url('switch.png');
}
</style>
Print
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?>
Here's prints.php:
<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>
How about something like this: http://jsfiddle.net/EgLKV/3/
Its done by using position:absolute and z-index to place the text over the image.
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>
This is another method for working with Responsive sizes. It will keep your text centered and maintain its position within its parent. If you don't want it centered then it's even easier, just work with the absolute parameters. Keep in mind the main container is using display: inline-block. There are many others ways to do this, depending on what you're working on.
Based off of Centering the Unknown
Working codepen example here
HTML
<div class="containerBox">
<div class="text-box">
<h4>Your Text is responsive and centered</h4>
</div>
<img class="img-responsive" src="http://placehold.it/900x100"/>
</div>
CSS
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
h4 {
display: inline-block;
font-size: 20px; /*or whatever you want*/
color: #FFF;
}
img {
display: block;
max-width: 100%;
height: auto;
}
Why not set sample.png as background image of text or h2 css class? This will give effect as you have written over an image.
For a responsive design it is good to use a container having a relative layout and content (placed in container) having fixed layout as.
CSS Styles:
/*Centering element in a base container*/
.contianer-relative{
position: relative;
}
.content-center-text-absolute{
position: absolute;
text-align: center;
width: 100%;
height: 0%;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 51;
}
HTML code:
<!-- Have used ionic classes -->
<div class="row">
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border" ><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></div> <!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
</div>
<div class="col remove-padding contianer-relative"><!-- container with position relative -->
<div class="item item-image clear-border"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></div><!-- Image intended to work as a background -->
<h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
</div>
</div>
For IONIC Grid layout, evenly spaced grid elements and the classes used in above HTML, please refer - Grid: Evenly Spaced Columns. Hope it helps you out... :)
as Harry Joy points out, set the image as the div's background and then, if you only have one line of text you can set the line-height of the text to be the same as the div height and this will place your text in the center of the div.
If you have more than one line you'll want to set the display to be table-cell and vertical-alignment to middle.
as of 2017 this is more responsive and worked for me.
This is for putting text inside vs over, like a badge.
instead of the number 8, I had a variable to pull data from a database.
this code started with Kailas's answer up above
https://jsfiddle.net/jim54729/memmu2wb/3/
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 30%;
text-align: center;
width: 100%;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
font-size: 30px;
}
.img-responsive {
display: block;
max-width: 100%;
height: 120px;
margin: auto;
padding: auto;
}
.dataNumber {
margin-top: auto;
}
<div class="containerBox">
<img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
<div class='text-box'>
<p class='dataNumber'> 8 </p>
</div>
</div>
A small and short way of doing the same:
.image {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 300px;
color: white;
background: url('https://via.placeholder.com/600') no-repeat;
background-size: 250px 250px;
}
<div class="image">
<p>
<h3>Heading 3</h3>
<h5>Heading 5</h5>
</p>
</div>
Quick solution: Set position: relative; on the container element and set position: absolute; on child elements in that container element, with the necessary top, left, bottom, right-adjusting parameters:
.top-left {
position: absolute;
top: 2px;
left: 2px;
}
.bottom-right {
position: absolute;
bottom: 2px;
right: 2px;
}
.container {
position: relative;
text-align: center;
color: white;
float:left;color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
<div class="container" style="">
<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2#2x.png" width="100">
<div class="top-left">Wikipedia</div>
<div class="bottom-right">Everyone's Encyclopedia</div>
</div>
Center it directly in the middle with the following CSS...
top: 50%;
left: 50%;
transform: translate(-50%, -50%);