Background image full width and height - html

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%;

Related

Insert image into HTML to be height-cropped

I have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.
You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>
Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}
Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>
You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.

How to align image in the center of the screen and add text in the left bottom corner of the image

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>

CSS: Element's relative size makes background-image disappear

I have a background-image that is 800x480 pixels. When my element has a fixed size I see the background-image, but not when the element has a relative size or a max-width.
Working CSS script
.audio-container, .settings-container {
max-width:800px;
height:480px;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
CSS script with no background image showing
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
position:absolute;
background-image:url("../../public/images/Audio/I_Audio_BGK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
What can I do to show the background-image yet have the element sizes relative to the browser window?
By request, here are the parent DIVs
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Here are the parent DIV CSS styles
.main-guy {
position:absolute;
/* Same result if width and height are set to a fixed number */
width: 100%;
height: 100%;
margin: auto;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
}
You have to change the position:absolute in .settings-container to position:relative as your image in this case act as a Child for .settings-container and the image should be according to its parent. So Position:absolute will not work.
Check the snippet
.main-guy {
position:absolute;
width: 100%;
height: 100%;
margin: auto;
background:#999;
}
.screen-inside {
margin:auto;
position:relative;
height:60%;
width:66.66%;
background-color:blue;
}
.audio-container, .settings-container {
width:100%;
/* Same result with max-width */
height:100%;
background-image:url(http://reservations.life/css/images/bg-01.jpg);
background-repeat: no-repeat;
background-size: cover;
position:absolute;
}
<div ng-controller="MainController" class="main-guy">
<div class="screen-inside">
<div class="audio-container" ng-controller="AudioController">
</div>
</div>
</div>
Using the following HTML:
<div class="settings-container"></div>
With the following CSS:
html, body { height: 100%; margin: 0; padding: 0; }
.settings-container {
width: 100%;
height: 100%;
text-align: center;
background-image: URL("your-image-here");
background-repeat: no-repeat;
background-size: cover;
}
Results in a background taking up 100% of the width and height of the viewport. It's difficult to solve your question properly without seeing the whole picture, but my guess is that you will need to apply height somewhere else in your document.
You may also run into issues with using position: absolute, but again that largely depends on the broader picture of how you're applying this to your site/application/whatever.

How to position text specifically in Bootstrap Jumbotron?

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 :)

CSS background image stretch with background-image property

I need to stretch the background image on the screen and fit when resizing it on this website DELETED, does anybody know?
<body>
<div id="background"></div>
...
</div>
</body>
The CSS file:
html, body { }
body { height:100%; width: 100%; }
#background{ position: fixed; min-height: 1024px; height:100%; min-width: 100%; width: auto; background-repeat: no-repeat; z-index:1 }
Thank you in advance
You'll find everything you need here:
http://css-tricks.com/perfect-full-page-background-image/