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
Related
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
I am wondering what is the best way to achieve two background divs (blue and gray) with a container over the top of them (red):
http://s22.postimg.org/44kcq1cqp/screenshot_413.png
I would create two divs for the background colours and 100vh but how would I overlay a container on top so I can make the login area? I'm trying to achieve something like this design:
http://s22.postimg.org/584h1zxdt/screenshot_414.png
Thanks in advance!
here is how I would do that :)
https://fiddle.jshell.net/okjn0oca/
* {
margin: 0;
padding: 0;
}
.content{
width: 100vw;
height: 100vh;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 40vw;
height: 100vh;
background-color: blue;
}
.right {
position: absolute;
right: 0;
top: 0;
height: 100vh;
width: 60vw;
background-color: green
}
.menu {
width: calc(100% - 30px);
height: 50px;
background-color: red;
margin: 15px auto;
}
.logo {
width: 60px;
height: 30px;
background-color: red;
margin: 15px;
}
.text{
position: absolute;
width: 30vw;
height: 100px;
left: 5vw;
top: 50%;
transform: translateY(-50%);
background-color: yellow;
}
<div class="content">
<div class="left">
<div class="logo">
</div>
<div class="text">
</div>
</div>
<div class="right">
<div class="menu">
</div>
</div>
</div>
You could use a 1px background image on the body:
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAFeCAYAAABEunUfAAAAG0lEQVR42mMUYPj/n3GUGCVGiVFilBglhgMBAK5H0KGRPNKKAAAAAElFTkSuQmCC) no-repeat;
background-size: 40% 100%;
Here's a Codepen with the example
With the background size you force the pixel to cover 40% of the width and 100% of the height.
The 1px background is generated with png-pixel.com.
Not sure if you have actually tried anything, but here's something you can try.
Assuming you only want to have split colors for the background, you don't have to use two divs for that. You can do that with gradient (don't forget vendor prefixes). Then it's just a matter of positioning the "overlay" div as you want.
.bg {
width: 100%;
height: 100vh;
position: relative;
background: linear-gradient(to right, rgba(0,56,199,1) 0%, rgba(0,56,199,1) 40%, rgba(74,74,74,1) 40%, rgba(74,74,74,1) 100%);
}
.overlay {
width: 60%;
height: 25%;
position: absolute;
top: 25%;
left: 10%;
background: white;
}
<div class="bg">
<div class="overlay"></div>
</div>
Use a single container.
<style>
.main
{
background:white;
}
.login
{
background:blue;
}
</style>
<div class="main">
<div class="col-md-5 no-margin">
leave it blank
</div>
<div class="col-md-7 no-margin login">
put your page contents here
</div>
</div>
Following is my code in which I am trying to apply a red color bottom to a div in such a way that it takes 50px left and right margin and then stretch to the max width, but somehow it is moving to the left. Let me know how can I make to appear in center to the bottom of the div with 50px space left from left and right.
Also let me know why the ::after element is creating from the center than from the extreme left. [Refer to the image of its creation].
HTML -
<div class="container">
<h1>This is a simple heading</h1>
<h3>This is only a test description</h3>
</div>
CSS -
.container {
background: #34EACC;
width: 100%;
text-align: center;
}
.container:after {
content: "";
position: absolute;
width: 100%;
margin: 0 50px;
height: 1px;
background-color: red;
}
JSFIDDLE - https://jsfiddle.net/gwdvqs5j/
IMAGE -
While defining absolute you also should declare left or right properties if want to position the element
.container {
background: #34EACC;
width: 100%;
text-align: center;
}
.container:after {
content: "";
position: absolute;
width: 90%;
left: 0;
right: 0;
margin: 0 auto;
height: 1px;
background-color: red;
}
<div class="container">
<h1>This is a simple heading</h1>
<h3>This is only a test description</h3>
</div>
Just use left and right properties
.container {
background: #34EACC;
width: 100%;
text-align: center;
}
.container:after {
content: "";
position: absolute;
height: 1px;
background-color: red;
left: 50px;
right: 50px;
}
<div class="container">
<h1>This is a simple heading</h1>
<h3>This is only a test description</h3>
</div>
You can use translate: transform(),
hope this helps :)
.container {
background: #34EACC;
width: 100%;
text-align: center;
}
.container:after {
content: "";
position: absolute;
width: 90%;
left: 50%;
transform: translateX(-50%);
height: 1px;
background-color: red;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>This is a simple heading</h1>
<h3>This is only a test description</h3>
</div>
</body>
</html>
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!
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%);