I'm trying to make my image full screen while overflowing the div
pulled from here:
CSS - how to overflow from div to full width of screen
Except instead of using a color, I'm using an image..but I want it to be full screen also. Any ideas?
.main-header:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 99vw;
background-size: cover;
background: url(header_bg.jpg) no-repeat center center; /* help */
z-index: -1;
}
Like this?
body{
margin:auto;
}
#for_real,#top{
width:100px;
height:100px;
border:solid;
z-index:100;
}
#for_real img{
position:fixed;
top:0px;
left:0px;
opacity:0.5;
width:100vw ;
height:100vh;
}
<div id='top'>
TOP DIV WITH NO IMAGE
</div>
<div id='for_real'>
DIV WITH IMAGE
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-gpy8G_VpoocZD5L5tuNO_hO_BC9zXl32WCjaHcE-ICiWhL5O'>
</div>
Related
I have used this approach https://stackoverflow.com/a/22211990
Only problem is that as soon as I enter text/content in div like this:
<div>abc</div>
That text appear under the image.
Code: https://codepen.io/labeeb/pen/JMxzQY
* {
padding: 0px;
margin: 0px;
}
.image {
background: url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
background-size: 100%;
background-size: contain;
height: 0;
padding-top: 100.44%; /* (bg image width/ bg image height) * 100*/
}
<div class="image">aaa</div>
You can give the image element position:relative and wrap the text in an element with position:absolute and top:0
*{
padding:0px;
margin:0px;
}
.relative {
position:relative;
}
.text {
position: absolute;
color: red;
top:0;
}
.image{
background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
background-size:100%;
height:0;
padding-top:100.44%; /* (bg image width/ bg image height) * 100*/
}
<div class="image relative">
<div class="text">aaa</div>
</div>
For me : you choice is a bad strategy, because de the padding-top will always impact your content. It is not the background job.
My solution : combine height 100vh and background-size cover.
*{
padding:0px;
margin:0px;
}
.image{
color: white;
height: 100vh;
background:url('https://i.pinimg.com/originals/4f/d6/ef/4fd6ef1f078ca5e229ce5925c10f194a.jpg') no-repeat;
background-size:cover;
}
<div class="image">aaa</div>
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.
Crop image and set as background without stretched and background image should be 50% cover image and 50% gray background
HTML:
<div class="main">
<div class="inner-wrapper">
//contain here
</div>
</div>
Css:
This .main class is background css property
.main
{
width:1024px;
margin:0 auto;
background:url(event_cover_img.jpg);
background-size:100%;
background-repeat:no-repeat;
background-color:#eceeef;
padding-bottom:50px;
box-shadow: 2px 2px 2px #969494;
}
.inner-wrapper
{
padding-top:150px;
float:left;
}
This image is wrong.
This image is right.
But image is starched so i need solution how it is solve?
you can try putting the image inside a pseudo class
.main::before {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0;
background:url(event_cover_img.jpg);
background-size: cover;
}
Use background-size: contain; if you don't want to stretched the image.
I need to have two divs with images equally spaced from the center of the page, one on the left and another one on the right, above central div.
I have tried to make an example in the following picture:
the main page div (flowers) is 1024 pixel, and the two right/left blue divs need to stay in the same position...
I am not that CSS expert ...how can I achieve this behaviour?
my CSS code so far:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(-60vw + 50%);
left: calc(-50% + 600px);
margin-left: -150px;
z-index: 100;
}
.overlay-right{
background-color: transparent !important;
background-image: url("/images/background-right.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
//left: calc(+130vw - 50%);
left: 1024px;
margin-left: 100px;
z-index: 100;
}
What you need is define a parent for your image (here #parent) and put image, and two other div[s] inside that parent.
You can do this:
#parent{
position:relative;
}
#parent img{
max-width:94%;
display:block;
margin:auto;
}
#parent> div{
width:50px;
height:300px;
background:rgba(125,125,255,0.5);
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#right{
right:0;
}
#left{
left:0;
}
<div id="parent">
<img src="http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg"/>
<div id="right"></div>
<div id="left"></div>
</div>
I think I managed the problem by using Calc.
I need to calculate half of the width of the page and then subtract or add a fixed number of pixels.
I Wa using Left with Calc with no luck, until I found this:
How to set the 'left' property of my div using css3 calc?
so basically I needed to use webkit-calc, moz-cal instead of simple "calc"
Now this is a snippet of working CSS:
.overlay-left{
background-color: transparent !important;
background-image: url("/images/background-left.png");
background-position: center top;
background-repeat: no-repeat;
height: 100vw;
position: absolute;
width: 400px;
left:-webkit-calc(100%/2 - 842px);
left:-moz-calc(100%/2 - 842px);
left:calc(100%/2 - 842px);
z-index: 100;
}
I have this simple html:
<img src="http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg" class="bg">
So far i centered the image correctly as long as the window is not smaller than the image. Now i have problems to keep the face in the middle when the window is smaller! How can i fix this?
For me its important that the image height stays 100% of the window.
My css:
img.bg {
width: auto;
height: 100%;
position: fixed;
left:0;
right:0;
margin:0 auto;
}
Thanks!
http://jsfiddle.net/67jDp/1/
Try using it as a background-image.
CSS:
.bg {
background-image:url('http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg');
width: auto;
height: 100%;
position: fixed;
left:0;
right:0;
margin:0 auto;
width:70%; //Custom dimension
background-position:center;
background-size:cover;
}
Demo: http://jsfiddle.net/lotusgodkk/67jDp/2/
Try setting the image as the background of a div instead of an img tag
http://jsfiddle.net/CeVwN/1/
.bg {
background-image:url('http://i1.ytimg.com/vi/XWGszmviDpA/maxresdefault.jpg');
background-position:center;
background-size: auto 100%;
background-repeat: no-repeat;
width: auto;
height: 100%;
position: fixed;
left:0;
right:0;
margin:0 auto;
}
You can use this with little javascript
css :
img.bg {
height: 100%;
position: fixed;
left:50%;
}
JS :
var i = $('img');
var w = i.width();
i.css({marginLeft: -w/2});
$( window ).resize(function() {
i.css({marginLeft: -w/2});
});
DEMO : http://jsfiddle.net/67jDp/4/
Set width to 100% to get always the container's width. Then, set height to auto to allow the ratio:
img.bg {
width: 100%;
height: auto;
position: fixed;
left:0;
right:0;
margin:0 auto;
}
Remember to set a max-width to stop expanding when necessary.