I want to create a div with background image and fit his height to 100%. I can achieve it with background-image: auto 100%;, but how to place the text above the image in this case?
Please check jsfiddle (try to increase the width of the window with the result to understand what I mean).
P.S. The solution should be responsive.
html, body {
height: 100%;
width: 100%;
}
body > .container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
width: 100%;
height: 100%;
}
<body>
<div class="container">
text
</div>
</body>
you could keep the container at least within the ratio of the background-image setting a max-width.
100vh equals the window's height
image is 1600px wide for 1100px of height. width's ratio from height is average 1.44 (1600/1100).
At the most, if the container is 144vh width (140% of height) content will stand hover the background filling up the entire container:
html, body {
height: 100%;
width: 100%;
margin:0;/* reset */
}
body > .container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
max-width:144vh;/* update*/
margin:auto;
border:solid;;
height: 100%;
}
<div class="container">
text
</div>
Other approach would be to clip the image as i commented earlier (let's keep here the elephant at middle and in sight):
html,
body {
height: 100%;
width: 100%;
margin: 0;
/* rset */
}
body>.container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
/* update*/
background-position: 100% 50%;
background-size: cover;
/* end update */
width: 100%;
height: 100%;
}
<div class="container">
text
</div>
Make the background-size:100%. You will get the responsive background-image with text
html, body {
height: 100%;
width: 100%;
}
body > .container {
background-image: url('https://paulmason.name/media/demos/full-screen-background-image/background.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
width: 100%;
height: 100%;
}
<body>
<div class="container">
text
</div>
</body>
Related
I've ran out of hope for this for the past few days,what I'm basically trying to do is to do this:
CSS:
.div1{
/* background-image code */
}
HTML:
<div class="div1">
<!--Image here-->
</div>
Is it even possible to have a background image larger than the image in the div itself?
See the following example to achieve what you are looking for. Basically you can combine a color and an image by using both the background-color and background-image props at the same time. Position and scale the image with background-size and background-position. background-repeat: no-repeat; is important to be able to see the area that is the simple color background.
.div1 {
background-color: blue;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
width: 400px;
height: 300px;
}
<div class="div1">
</div>
For two images layered in this way:
.div1 {
background-image: url(https://www.realtree.com/sites/default/files/styles/site_xl/public/content/inserts/2022/imagebybarriebird-ducklings.jpg);
width: 400px;
height: 300px;
position: relative;
color: white;
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
/*to center the text */
display: flex;
align-items: center;
justify-content: center;
}
.div1::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: cover;
/*to set this image layer behind the duck one */
z-index: -1;
}
<div class="div1">
Example content text
</div>
you can add width and height in each img and background-image
.div1{
width: 100vw;
height: 500px;
/* background-image code */
}
img {
width : 200px;
height : 200px;
}
<div class="div1">
<img src="code.png" alt="">
<!--Image here-->
</div>
Give the img some padding and put the background image on it.
div {
width: fit-content;
}
img {
background-image: url(https://picsum.photos/id/1015/300/300);
background-size: cover;
padding: 30px;
}
<div>
<img src="https://picsum.photos/id/1016/200/300">
</div>
As you can see, I'm trying to make container which a background-image responsive when I minimize my browser's window.
I've tried playing with max-width ,percentages, background-size:cover and a few other tricks but they didn't work or they made my container disappear.
Pug
section
div(class='container')
SASS
section
height: 100vh
width: 100vw
background: gray
.container
position: absolute
background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg')
background-repeat: no-repeat
background-position: center
background-size: cover
height: 807px
width: 948px
left: 50%
top: 50%
transform: translate(-50%,-50%)
CodePen
You can try something like this:
body {
margin: 0;
}
.container {
height: 100vh;
width: 100vw;
display: flex; /*use flex to easily center*/
background: gray;
}
.container>div {
background: url('https://www.triplejtours.com.au/wp-content/uploads/2016/02/Lake-Kununurra-reflections-Dylan-Lodge.jpg');
background-repeat: no-repeat;
background-position: center; /*keep it center within the centred div*/
background-size: contain; /*use contain to make the image shrink visually*/
width: 100%;
height: 100%;
margin: auto; /*center the div*/
max-width: 948px; /*Image width*/
max-height: 807px; /*Image height*/
}
<div class="container">
<div></div>
</div>
I am attempting to use 100vh to make a background-image always have a height per the size of the screen. What I am wanting to do is use the same image for each viewport and allow the overflow: hidden to make due of the access width. In essence, narrowing the image more vertically. However, my attempt is not working. The background-image is not adjusting to the 100vh.
Does anyone see what I am doing wrong?
#home-cover1 {
background-image: url("/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
width: 100%;
position: relative;
}
#home-cover1-wrap {
background-color: rgba(0,0,0,0.3);
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
<div id="home-cover1">
<div id="home-cover1-wrap">
</div>
</div>
Change CSS I think background-size: cover; is Best
#home-cover1 {
background-image: url("https://optimumwebdesigns.com/images/home-cover1.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
position: relative;
}
Your #home-cover1 background-size lack the 100% of height, change background-size: 100%; to background-size: 100% 100%;
I'm trying to make my background from website so if I'll go to mobile it will stretch it by height in center.
Something from that: large screen to that small screen
my code is:
body{
background-image: url("Tie_logo_shaders.jpg");
background-color: black;
background-size: 100% 100%;
background-size: cover;
background-repeat: no-repeat;
}
Try this code
.bg-img{
background: url("https://s-media-cache-ak0.pinimg.com/originals/27/3e/43/273e43a71854d8359186ecc348370f8d.jpg") no-repeat center center;
min-height: 100%;
position: relative;
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
<body>
<div class="bg-img">
</div>
</body>
I have this html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html><head>
<link href="css/testphoto2.css" rel="stylesheet">
</head>
<body>
<img src="http://placekitten.com/g/200/300" alt="Smiley face" width="420" height="420">
<header class="section" >
</header>
</body>
</html>
and this css:
body {
height: auto;
width: 100%;
background-color: #111;
}
img {
max-width: 100%;
height: auto;
width: auto\;
}
.section {
display: inline-block;
width: 100%;
height: 100%;
padding: 200px 0;
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
I want to have the kitty scale properly as the browser is resized. In the first image, the kitty reaches its native maximum and stays there, regardless of further browser enlargement. The second kitty fills the browser width but only stretches horizontally once the browser exceeds its native width. I would like the kitty to scale in both dimensions as the browser window grows. If I remove the 'padding' property from the css, the kitty disappears.
Change in your CSS for "section" class as:
.section {
display: inline-block;
width: 100%;
height: 300px; /* height should have to provide */
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
Height should have to provide.
make height:100% for HTML, body and section. Remove padding from section
html{
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
background-color: #111;
}
img {
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.section {
display: inline-block;
width: 100%;
height: 100%;
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}
check this out
https://jsfiddle.net/160cL4xo/
Set width & height of html & body to 100%. Remove Padding from section.
html,body{
height: 100%;
width: 100%;
}
Working Demo: Fiddler
Unfortunately, none of the solutions worked for getting the background image to scale properly. The kitty gets cropped in some way or another with scaling. The effect I want to achieve is provided by this css:
html, body {
height: auto;
width: 100%;
background-color: #111;
}
img {
max-width: 100%;
width: inherit !important;
height: inherit !important;
}
but I do not know how to achieve it for a background image. Notice how the entire kitty fills the frame proportionately and is never cropped with resizing.
EDIT: This fixes the background image:
.section {
display: inline-table;
padding: 80% 0;
background: url("http://placekitten.com/g/200/300") no-repeat center center ;
background-size: cover;
width: inherit !important;
height: inherit !important;
}
Don't ask me why 80% is needed. But the background kitty now fills the frame and scales just like the html kitty.
https://jsfiddle.net/ox2dy086/
Change in your CSS for "section" class as:
.section {
display: block;
width: 100%;
height: 300px; /* height should have to provide */
background: url("http://placekitten.com/g/200/300") no-repeat center center scroll;
background-size: cover;
}