I have a background image that adapts to the screen height and is on full width. Problem is, when I resize my width, the image stretches instead of fill. Also, the content that should be below it overlays the image totally.
This is my code so far.
HTML:
<div id="bg">
<img src="http://placehold.it/2560x1000" class="img" alt="" />
</div>
<div id="content">
<!-- some content -->
</div>
CSS:
#bg {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.img {
background-position: center center;
background-size: contain;
height: 100%;
width: 100%;
position: relative;
}
And here's a fiddle for it: http://jsfiddle.net/anm5sqft/
You use "background-position" and "background-size" but you doesn't have a background, because your image is not a background, it's an image.
Try this :
HTML
<div id="bg">
</div>
CSS
#bg {
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-image: url("http://placehold.it/2560x1000");
}
body{
margin: 0;
}
Example with JSFiddle
.bg-section {
background-position:center center;
background-size:cover;
background-repeat:no-repeat;
height:100vh;
}
<div class="bg-section" style="background-image:url(http://placehold.it/2560x1000)"></div>
http://jsfiddle.net/1wurw0zu/
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>
I know there are questions similar to this one, but none of them worked for me.
I have a div class with a background image:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
}
Is there any way to make the #index-box div class so high, that the whole background image fits in?
If you know the aspect ratio of the image you can put all in a container with percentage padding and relative position. then another box full width and height with absolute position for the content. For the below image the original size of the image is 1280X720, so the ratio height/width 0.5625:
#background {
position: relative;
padding-bottom: 56.25%;
background-image: url('https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg');
background-size: cover;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="background">
<div id="content">some content<div>
</div>
Also, with similar way you always can use the image as an img element. so you even not need to know the aspect-ratio. like that:
#container {
position: relative;
}
#bg {
width: 100%;
display: block;
}
#content{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div id="container">
<img id="bg" src="https://i.ytimg.com/vi/MPV2METPeJU/maxresdefault.jpg"/>
<div id="content">some content</div>
</div>
try to apply this code:
#index-box{
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
object-fit:cover;
}
or
body{
margin:0;
width:100%;
}
#index-box{
height:100%;
border-radius: 20px;
background: url('/static/images/bg.png') no-repeat;
background-size: cover;
background-position:center;
}
I would like to add to my image a layer with colour and set blend mode, for example multiply to 50% of all image width. Like that:
I know how to create that to full image, by how to create on 50% of image width?
Here is example on full image
[https://codepen.io/Matteokr/pen/PyJwKB][2]
One way to achieve that is to use background-blend-mode like this:
*{box-sizing:border-box;padding:0; margin:0}
.wrapper{
position: relative;
width: 480px;
height:320px;
margin: 64px auto;
background-image: url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.image{
position:absolute;
left: 0;
top: 0;
width: 480px;
height:320px;
background-blend-mode: color;
background-color: #ffff006e;
background-image: linear-gradient(yellow, #d3e600), url(https://pbs.twimg.com/media/DkFVuYUXcAAPYQE.jpg);
}
.wrapper,
.image{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.layer{
position: relative;
width: 65%; /*change the percentage here*/
height:100%;
overflow: hidden
}
<div class="wrapper">
<div class="layer">
<div class="image"></div>
<div>
</div>
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'm trying to create a full screen background image that re sizes across devices.
The first content section I want to always appear at the "bottom" of the devices screen after the full image. I've done this already.
I now want to carry on adding div elements but the div gets pushed back to the top.
I think it may be my position tags..?
Code
body {
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.content {
position: absolute;
top: 100%;
width: 100%;
background: #FF6969;
}
.moreContent {
height: 100px;
top: 100%;
width: 100%;
background: white;
}
html:
<div class="content">
Hello this is my content
<br/>
<br/>
<br/>
<br/>Lots of content
</div>
<div class="moreContent">
this should be below 'content' div
</div>
(also using bootstrap for the real project)
Fiddle
From what I understand you are looking for something like this:
body {
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin:0
}
.content {
position: absolute;
bottom: -100px;
width: 100%;
background: #FF6969;
height: 100px;
}
.moreContent {
position: absolute;
height: 100px;
bottom: -200px;
width: 100%;
background: white;
}
<body>
<div class="content">
Hello this is my content
<br/>
<br/>
<br/>
<br/>Lots of content
</div>
<div class="moreContent">
more content...
</div>
</body>
I would do it a bit differently, considering I don't want to keep adding -100px, -200px etc to my div classes. That is a very dirty way of writing css.
So I would create a container Class for all my div elements:-
<body>
<div class="container">
<div class="content">
Hello this is my content
Lots of contentxxx
</div>
<div class="moreContent">
more content...vcbcvbcv
</div>
</div>
</body>
and then use the following css:-
body {
background-image: url(http://www.gettyimages.co.uk/gi-resources/images/CreativeImages/Hero-527920799.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.container{
bottom:0;
position:absolute;
width:100%;
}
.content {
height: 100px;
width: 100%;
background: #FF6969;
}
.moreContent {
height: 100px;
width: 100%;
background: white;
}
I personally find it much more general and elegant.
https://jsfiddle.net/8xrap3o5/6/