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/
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'm trying to overlap two images in CSS: the first one is a "background" image of the main menu and the second is the "cover" of the front page. The issue is that the first one is a png with transparency and it needs to display above the cover (right now, it doesn't goes beyond the div container).
Right now the result is this:
But the first image, the one under #menu .container-fluid is this:
The current code:
HTML
<section>
<div id="menu">
<div class="container-fluid">
<!-- Content of menu -->
</div>
</div>
<div id="portada">
<figure class="proporcion-fija-indice"></figure>
</div>
</section>
CSS
.proporcion-fija-indice {
display: block;
margin: 0;
padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
background-image: url('../img/portada.jpg');
background-size: cover;
background-position: center center;
}
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 125px;
}
Any ideas of how to achieve the desired result?
Have you tried making the header higher, and setting a negative margin-top on proporcion-fija-indice?
.proporcion-fija-indice {
display: block;
margin: 0;
padding-top: 48.30%; /* 2026px/4194px = 0.4830 */
background-image: url('../img/portada.jpg');
background-size: cover;
background-position: center center;
margin-top:-50px;
}
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 150px;
}
You can use z-index
#menu .container-fluid {
background-image: url('../img/header.png');
min-height: 125px;
z-index:1;
}
another approach would be using position absolute in the #menu...this might need some adjustments..
This is an example of how you can make it work :
#menu {
background-image: url("https://i.stack.imgur.com/zRInk.png");
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
background-repeat: no-repeat
}
#portada {
background-image: url("https://cdn-images-1.medium.com/max/1500/1*d2MAPp7120q_8x6Ue8KYmQ.png");
width: 100%;
height: 100%;
z-index: -2;
position: absolute;
top: 0px;
left: 0px;
background-repeat: no-repeat
}
<section>
<div id="menu">
<div class="container-fluid">
</div>
</div>
<div id="portada">
<figure class="proporcion-fija-indice"></figure>
</div>
</section>
I want my background image to cove the entire div but instead there are a lot of white space
HTML
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
CSS
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
Please use background-size:cover
.backgroundimg{
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
background-size:cover;
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the white border bothers you around the background, use something like this:
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: relative;
}
.backgroundsecction {
height: 900px;
width: 100%;
}
body {
margin: 0;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
If the image is smaller than the screen, than use larger image. it is generally good practice to prepare that some people could have very very large resolution displays...
Or scale it up, like #ankitapatel mentioned: with background-size:cover;.
Use 2 things as suggested
body {
margin : 0px; //add this
}
.backgroundimg {
background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;
position: fixed; //change fixed to cover entire
}
.backgroundsecction{
height: 900px;
width: 100%;
}
<div class="backgroundsecction">
<div class="backgroundimg"></div>
</div>
I've been trying to solve this problem for hours, and I've searched across the whole internet with no luck.
I'm trying to centre this background image in the page; however as shown here by using this method it stretches the width of the page, meaning that you can scroll past the width of the page.
Here's my code:
HTML:
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="bground">d</div>
</div>
</body>
</html>
CSS:
div.container {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
}
div.bground {
position: relative;
width: 100%;
height: 100%;
left: -50%;
background: url('http://cdn.bleedingcool.net/wpcontent/uploads/2015/04/skyrim.jpg') no-repeat center center scroll;
}
You have been moving container div for 50% to the right, that's why you got horizontal scroll-bar, not out of image but out of a div positioning.
Try out this css:
div.container {
position: absolute;
width: 100%;
height: 100%;
left: 0;
}
div.bground {
position: relative;
width: 100%;
height: 100%;
left: 0;
background: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg') no-repeat center center scroll;
}
https://jsfiddle.net/m2oy2wmw/3/
I made you a fiddle, if this is what you are looking for.
You can always use "100vh" to have full height (even when resizing screen).
div.container {
height: 100vh; //100vh to always have 100% height.
width: 100%;
background: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg');
background-size: cover;
background-position: center center;
}
<div class="container">
<div class="bground">d</div>
</div>
I think this is what you need, let me know what is not working for you...
body {
background-image: url('http://cdn.bleedingcool.net/wp-content/uploads/2015/04/skyrim.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<body>
</body>