In my Jumbotron, I would like to have some text pinned to the bottom left corner of the Jumbotron. I have some max-width & max-height properties that I think might be the issue, but i'm not really sure. I've gotten it sort of in the code below, but when the page is resized it the text moves off of the Jumbotron or positions all wonky.
HTML:
<a href="#">
<div class="six">
<div class="col-sm-4">
<div class="jumbotron">
</a>
<h5>Text</h5>
</div>
</div>
</div>
CSS:
.six .jumbotron
{ background: url("Img") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
min-width: 220px;
max-width:250px;
min-height:260px;
max-height:300px;
margin: 0 auto;
margin: 3em auto;
}
` .six .jumbotron > h5{
position:absolute;
color:#000;
left:10px;
bottom:10px;
font-size:15px;
}`
It's because you position the H5 absolute to the page and not to the element, to fix it do this: Fiddle here:https://jsfiddle.net/agc3e3yp/2/
.jumbotron h5{
margin-top:90%;
left:10px;
font-size:15px;
color:#fff;
}
Note the text will still move around, but that is because the parent element is changing size when you change screen size. but now it will stay inside the box at 90% of it's height. Best bet is just put your text in a div and style it yourself.
Let me know it works for you :)
Related
I'm building a simple website right now and faced a small issue. How do I align picture (iMessage text with blue bubble) in the center of the screen so and place a text in the bottom left corner of the image (text is Read + time)?
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
div {
position:relative;
height: 100%;
width:100%;
}
div img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<head>
<div>
<img src="myimage.jpg"></img>
</div>
</head>
But how do I add text in the bottom left corner right below the image?
Something like this might work for you...
<style>
html, body
{
height: 100%;
margin:0;
padding:0;
}
.centered{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<head>
<div class="centered">
<img src="myimage.jpg"></img>
<p>tester</p>
</div>
</head>
Although I completely agree with Temani, there are lots of resources on centring such as the links below:
css3 pr align-self
how to css image center
css align
Do you want to set your image in the center of screen Or in the center of a div?
If you want to set it in the center of screen horizontally then you shoud set
margin-left:auto;
margin-right:auto;
And if you want add text on image, you shoud set that image in the background of a div and add text in that div wherever you want
.imgdiv{ background: url(your IMG url) no-repeat center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
height: 150px; width: 300px;
}
.imgtxt{
left:0; bottom:0;
}
<div class="imgdiv" >
<span class="imgtxt">Your text</span>
</div>
I want to position a background image on the background of my page.
I have a page that is finished. Now I need to place an image on the background of the page that is positioned on the center and will span the entire width of the browser.
Yeah I know confusing. I didn't understand either when I read it. So I added a
Fiddle here
I want to add a background image to the wrapper and center it on the two div's while it's possible to be bigger then the screen.
<div class="wrapper">
<div class="container">
<div class="left">
Left content
</div><div class="right">
right content
</div>
</div>
</div>
Hope now it makes sense.
You need to remove the background from the .container to show the background image on the .wrapper. And use three background position to adjust it:
background-image: url() - To include the image.
background-size: cover - To cover whole background size.
background-image: center - To make it at the center of the div.
Have a look at the below snippet:
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background-image: url(http://placehold.it/200x200);
background-size: cover;
background-position: center;
}
.container{
position: relative;
max-width: 1280px;
height: 260px;
/* background: #ffffff; */
margin: 0 auto;
}
.left{
position:relative;
display:inline-block;
width:50%;
border:1px solid #000;
}
.right{
position:relative;
display:inline-block;
width:49%;
border:1px solid #000;
}
<div class="wrapper">
<div class="container">
<div class="left">Left Content</div><div class="right">Right Content</div>
</div>
</div>
Hope this helps!
You can find a solution here - you need to get rid of white background on .container as it will cover the background of the .wrapper . Then, you can set background-size: cover; for .wrapper so it will cover whole area of that div. I have used some random background.
.wrapper{
margin: 0 auto 0 auto;
max-width: 100%;
text-align: left;
background: url("http://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172?k=6&m=508795172&s=170667a&w=0&h=uxKISA4xMNkrBCcEFhdN5mm-ZDv8LFzWUhMMmG3CNuQ=");
background-size: cover;
}
I wasn't quite sure what you meant, but I updated your fiddle. https://jsfiddle.net/0ao6r0en/3/
I think you meant that you want white behind the boxes, center that white box, and have an image on the wrapper?
Thats what I did for you so you can see, check it out!
Check out the fiddle
I'm setting up a banner for a website. The banner is consisting of an image, and some text on top of it, here's the code :
<div class="banner_div">
<style>
.banner_div{
background-image: url(/images/banner.jpg);
width: 100%;
height: 100%;
background-size: contain;
}
</style>
<p class="banner_text">Line 1</br>Line 2</p>
</div>
What I need is for the image to cover the full width of the screen (even if the screen is wider than the image, in which case the image should strech) and the height of the div to scale accordingly so the image is fully displayed. How can I achieve this ? I tried every property of background-size but it didn't work...
Edit : the current problem is that the height scales tho the one of the text
I have a better solution for your issue.
The problem is because you are not giving height for HTML,BODY.
if you gave the height this issue will be solved, no need to add position elements to this, it will make some alignment issue in future
SOLUTION
HTML
<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>
CSS
html,body{
height:100%;
margin:0;
padding:0;
}
.banner_div{
background-image: url(http://placehold.it/100x100);
background-size: cover;
background-position: center;
width:100%;
height:100%;
}
.banner_text{
margin:0;
padding:20px;
}
<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>
Try the following solution:
body, html {
margin:0;
padding:0;
}
.banner_div {
background-image: url(http://placehold.it/100x100);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-size:cover;
background-position: center;
}
<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>
Firstly use a 16:9 image for better results:
Then use img tag itself,
Scaling the image without its aspect ratio into consideration may not look good for a banner, So we use width:100% and height:auto to preserve banner ratio.
Most screen uses 16:9 ratio, so it should be good if you have a 16:9 image
body,
html {
margin: 0px;
padding: 0px;
height: 100%;
}
.banner{
display:block;
}
.banner img {
width: 100%;
height: auto;
position: relative;
}
.banner p {
float:left;
position:absolute;
top:0px;
}
<div class="banner">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg" />
<p>Some text here</p>
</div>
Some random text to show other elements wont overlap the banner
This css code working with me :
background-size: 100% 100%;
I've been working on page for my client and I want to have background image on body (in fiddle there is black color instead of image) and content wrapper with width of 1200px (or so) and height of 100% of the page with white color background.
The problem is, that even though I have all parental elements set to have height 100%, the background is not 100% height. It's acting weird and I've tried to rewrite for 4th time without success. I don't know what is wrong. Could you please give me a hint, tip or solution. Thanks!
html, body {
background: url('./images/background.jpg') no-repeat center center fixed;
font-family: Verdana;
font-size: 14px;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
margin: 0 auto;
height: 100%;
min-width: 1200px;
background-color: white;
background-size: cover;
}
.leftcol {
width: 350px;
height: 100%;
float: left;
}
.rightcol {
width: 850px;
height: 100%;
float: right;
}
.footer {
width: 1200px;
height: 50px;
float: left;
text-align: center;
}
Also I have noticed that footer is acting wierd to, it's in the middle of the page in 'rightcol' element.
Here is a fiddle: http://jsfiddle.net/cramb5fg/1/
See if this JSFiddle gets you closer. It has a full screen background too.
It fixes a few errors like:
Clearing your floated column divs by adding a "Clearfix" to the container that now holds only the 2 column divs.
A wrapper that displays at 100% height and width was added to contain the header, main content, and footer. It also has the main background applied.
The float was removed from the footer, and now the footer is absolutely positioned at the bottom, in relation to the main wrapper.
The empty <div class="header"></div> was removed.
HTML Structure in the JSFiddle Example (based on your wireframe)
<div id="main-wrapper">
<div class="navigation">
<nav>
<h1><i class="fa fa-car">Title</i></h1>
</nav>
</div>
<div class="container clearfix">
<div class="leftcol">
<div class="sidebar">
<div class="sidebar-head">Title</div>
<div class="sidebar-body"><p>...</p></div>
</div>
</div>
<div class="rightcol"><p>...</p></div>
</div> <!-- end container clearfix -->
<div class="footer">Copyright © 2014</div>
</div> <!-- end main-wrapper -->
Give this wireframe a good test because some details may have been overlooked, also test by enlarging and reducing the browser area, and holding down CTRL+ or - to to enlarge and shrink the screen.
I'm not sure exactly what you are trying to do but your example code is different than your fiddle. You should be able to make your background 100% easily.
html {
background: url(http://placehold.it/400) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
See fiddle here
Also, check out http://css-tricks.com/perfect-full-page-background-image/ for more info
edit: I've updated your fiddle with what I think you are trying to do
CSS heigh will if you define position absolute/fixed. such:
.class_name{
position:absolute;
height:100%;
top:0;
left:0;
}
One more important matter: top and left also compulsory.
I'm trying to place a clickable image in the center using padding.
The problem is that there is a lot of unwanted clickable space around the image now. I can even click the image from the edges of my screen although the image is in the middle of the screen.
If I remove padding it works but then the image isn't were I want.
Is there a way to fix this?
My HTML:
<body>
<div class="page">
<div class="body">
<div id="clicktoenter">
<h1></h1>
</div>
</div>
</div>
</body>
My CSS:
.body{
width:940px;
margin:0 auto;
padding:0 10px;
overflow:hidden;
}
.home{
margin-bottom: 10px;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
padding:200px 200px;
}
.home:hover{
background:url(../images/imageclick.png) center center no-repeat;
padding:200px 200px;
}
Change your margin to this and it will center, not using padding.
.home{
margin:200px auto 200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
You have fixed width of block element, so you can to use auto left/right margins to center this block:
.home{
margin:200px auto;
width: 460px;
height:460px;
display:block;
background:url(../images/image.png) center center no-repeat;
}
If you really want the clickable image to be in the middle of your screen, then forget the padding and just center the h1 the image is in.
#clicktoenter h1 {text-align:center}