Have created a full screen image, that is filling the full site when you enter my website. But I can't make text over the image so that I can have a read more button and a welcome to name.
This is my code:
<div class="row">
<div class="col-md-12-">
<img class="img-responsive" style="min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; " src="~/Content/img/maxresdefault%20(1).jpg" />
</div>
</div>
Any suggestions on how I add text over an image?
It needs to look like this:
There are a few ways:
div with text inside and style="background: url('my_img.png');".
a div with 'position: absolute; z-index: -1;' behind it that contains the img or background img.
Just add position property value of absolute, and a positive z-index property value to the text container only. See the example below and adjust as needed.
.row {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.col-md-12 {
width: 100%;
height: 100%;
}
.col-md-12 img {
width: 100%;
height: auto;
}
.text {
position: absolute; /* Make stack-ability possible */
z-index: 3;
top: 100px;
left: 50px;
color: white;
font-size: 36px;
font-weight: bold;
background: black;
opacity: 0.70;
padding: 10px;
;
<div class="row">
<div class="col-md-12">
<img src="http://i.stack.imgur.com/xvCoo.jpg">
</div>
<div class="text"> Whatever your text is goes here </div>
<div>
There are a couple of ways to do it, the second option IMO is the simplest.
Positioned absolute
Offset from top with margin and center aligned button/content
http://codepen.io/anon/pen/jbBVeB
body{
background: url(http://placehold.it/1600x900);
}
.welcome{
margin-top: 50px;
text-align: center;
}
with the background-image method your CSS code would be:
body{
background-image: url('~/Content/img/maxresdefault%20(1).jpg');
background-position: center;
background-attachment: fixed;
}
put that on CSS and you're done!
Related
About Us and Contact Us are my two sections. The contact us section's background property is working well. However, I now want to add a background picture to both divs' parent wrappers. Therefore, the background image may be seen above both divs. I am unable to identify the issue that is preventing me from displaying the background image.
index.html:
<div class="aboutus-contact-us-wrapper" >
<div class="about-us-section">
// content here
</div>
<div class="contact-us">
// content here
</div>
</div>
style.css:
.aboutus-contact-us-wrapper {
width: 100%;
position: relative;
background-image: url('./images/ourboardvector.png');
background-size: 100%;
background-position: right;
background-size: contain;
}
.contact-us {
width: 100%;
height: 100vh;
background-color: #181f2b;
position: relative;
border-bottom: 20px;
color: #ffffff;
position: relative;
}
.about-us-section {
position: relative;
width: 100%;
height: 100vh;
background-color: #F1F1F1;
font-family: 'Lato' !important;
}
Set z-index of both child divs to -1.
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed )
.aboutus-contact-us-wrapper {
width: 100%;
position: relative;
background-image: url('./images/ourboardvector.png');
background-size: 100%;
background-position: right;
background-size: contain;
}
.contact-us {
width: 100%;
height: 100vh;
background-color: #181f2b;
position: relative;
border-bottom: 20px;
color: #ffffff;
position: relative;
z-index: -1;
}
.about-us-section {
position: relative;
width: 100%;
height: 100vh;
background-color: #F1F1F1;
font-family: 'Lato' !important;
z-index: -1;
}
<div class="aboutus-contact-us-wrapper">
<div class="about-us-section">
// content here
</div>
<div class="contact-us">
// content here
</div>
</div>
Building an image slideshow, I have a container div of arbitrary size and aspect ratio into which I have to best fit an image, centred, with a caption overlayed at the bottom of the image and fitting its width. My best solution to date is to contain the image and the caption in a child element of the container but I'm having trouble centring it. This should be such a simple thing that I can't believe it's not staring me in the face but I can't see it. The code below uses a portrait format image but I need it to handle landscape also. I'm using React so jQuery is out.
.container {
position: relative;
width: 80%;
height: 48vw;
/* 4:3 */
margin: 0 auto;
display: flex;
justify-content: center;
}
.img-wrap {
background-color: #efe;
}
img {
position: absolute;
max-width: 100%;
max-height: 100%;
}
.caption {
position: absolute;
bottom: 0;
color: #fff;
background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
<div class="img-wrap">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-full-aesthetic-aurora-night-sky-background-skystarry-skystarnight-viewbackgroundstar-image_87582.jpg" height="1600px">
<div class="caption">Caption Content</div>
</div>
</div>
Update your code like below:
.container {
width: 80%;
height: 48vw;
/* 4:3 */
margin: 5px auto;
text-align: center;
}
.img-wrap {
background-color: #efe;
height: 100%;
display: inline-block;
position: relative;
}
img {
max-width: 100%;
height: 100%;
display: block;
object-fit: contain; /*or cover if you want to cover all the area*/
object-position: bottom;
}
.caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
color: #fff;
background-color: rgba(153, 153, 153, 0.541)
}
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/400/600.jpg">
<div class="caption">Caption Content</div>
</div>
</div>
<div class="container">
<div class="img-wrap">
<img src="https://i.picsum.photos/id/10/600/300.jpg">
<div class="caption">Caption Content</div>
</div>
</div>
don't position absolute the image,
also if the caption is the sibling of the image,
set the size of the parent and set the image as 100% if the parent's width and height
then you can simply use the text-align: center on the caption to center it.
edit :
keep the existing style of a caption for positioning
fiddle : https://jsfiddle.net/hellooutlook/6ep4Lofz/4/
I'm trying to attach an "information div" to the left bottom edge of a fullscreen/centered/fitted image.
The image has to fit into the screen size (just like css property object-fit: contain does) and the information div should be attached to the bottom left side of the image.
Here is my css try (not even close) and here are three images to describe the wanted behavior!
Note: I'm looking for a CSS-only solution, so, please, no JS!
Edit: Attach div to a fullscreen image to the corner of another div with no predefined size / fullscreen.
* {
margin: 0;
padding: 0;
}
#out {
}
#in {
}
#info {
background-color: red;
color: white;
display: inline-block;
position: absolute;
bottom: 10px;
left: 10px;
}
img {
width: 100vw;
height: 100vh;
object-fit: contain;
}
<div id="out">
<div id="in">
<img src="https://images.unsplash.com/photo-1501630834273-4b5604d2ee31?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="">
<div id="info">This is the image info!</div>
</div>
</div>
If I understand you correctly, you're looking for something like this? Open it fullscreen, resize the page, throw different images in there, cheers.
div {
border: red 1px dashed;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
div:after {
content: attr(data-overlay);
position: absolute;
bottom: 1rem;
left: 1rem;
color: white;
font-size: 2rem;
}
img {
object-fit: contain;
height: 100vh;
width: 100wh;
}
<div data-overlay="TEXT TEXT TEXT">
<img src="https://images.pexels.com/photos/1498923/pexels-photo-1498923.jpeg"/>
</div>
Wrap the image in a div that will be the relative parent of your info div.
section {
display: flex; /* centers everything in the section */
flex-direction: column;
align-items: center;
}
.image-wrap {
display: inline-block; /* keeps the wrapper div the same size as the child image */
position: relative; /* for positioning the info div */
}
.image-info {
position: absolute;
left: 10px;
bottom: 10px;
font-size: 18px;
text-transform: uppercase;
color: white;
}
<section>
<div class="image-wrap">
<img src="https://picsum.photos/200/300" />
<div class="image-info">Nice image</div>
</div>
<div class="image-wrap">
<img src="https://picsum.photos/300/200" />
<div class="image-info">This one is cool</div>
</div>
<div class="image-wrap">
<img src="https://picsum.photos/450/180" />
<div class="image-info">Pretty!</div>
</div>
</section>
you need to use Viewport unit
for that you need to set the size of your div.#out
which is width: 100vw; height: 100vh
So, I'm trying to create a layout where the paragraph tag should always be aligned to a specific part of the background image.
Link with working example https://codepen.io/marcelcruz/pen/BRgaVL
I want the text to be always inside the crystal ball, but once I resize the window the background shrinks, the crystal ball goes up and they're not aligned anymore.
Is there a way of making the background only shrink on both sides, but not on the top and bottom? Some other better approach for this?
This part of the code looks something like this:
* {
padding: 0;
margin: 0;
}
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
background-size: cover;
height: 100vh;
}
#text {
color: red;
background: yellow;
width: 60px;
position: absolute;
top: 900px;
left: 50%;
}
<div id="main">
<p id="text">TEXT COMES HERE</p>
</div>
Thanks!
This could be done with an <img> tag and relative positioning, example
.container img {
max-width: 100%;
}
.img-container {
display: inline-block;
position: relative;
}
.positioning {
position: absolute;
left: 45%;
bottom: 30%;
background-color: red;
color: white;
padding: 4px;
font-size: 17px;
line-height: 18px;
}
<div id="container" class="container">
<div class="img-container">
<div class="positioning">
Some Text
</div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg" />
</div>
</div>
Hope this helps!
<html>
<head>
<style>
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
background-size: 100% 100%;
}
#text {
color: red;
background: yellow;
width: 60px;
position: absolute;
left: 50%;
top: 80%;
}
</style>
</head>
<body>
<div id="main">
<p id="text">TEXT COMES HERE</p>
</div>
</body>
</html>
It works, when You set background-size: 100% 100%;
What more? Click link_for_more
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%);