All right so i have got an image inside a slider and it does not scale properly.
It is first small and then stretches.I want it to be stretched all the way through.How can this be achieved?
Have a look at the screenshots(ignore the red in second screenshot):
And the css:
.slider-wrapper {
width: 310px;
height: 580px;
background: url("images/S4.png") center center ;
background-size: contain;
background-repeat: no-repeat;
}
.nivoSlider {
position:relative;
width:268px;
height:474px;
top:51px;
bottom:0px;
left:21px;
right:23px;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:268px;
height:474px;
}
And a link to the page:
http://oneapptheme.github.io
You can try this :-
.nivoSlider3 img{height:100% !important;}
use in the css file of image...
background-size: 100%;
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.
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>
When I use the following code the background image isn't being displayed are there any prerequisites to display a background image ?
<section class="starter"></section>
.starter
{
background-image:url("Assets/Images/Section.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
Here is a fiddle to your code:
http://jsfiddle.net/xywzx4uv/
(Note: I used another image and removed the broken comment)
.starter
{
background-image:url("http://lorempixel.com/output/nature-q-c-1244-102-1.jpg");
background-size: cover;
background-repeat:repeat-x;
width:100%;
height: 100px;
top:0px;
left:0px;
}
It is working as intended, so there must be an error with the image-path.
I have a fiddle here.
CSS:
body, html{
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100% 100%;
}
#img {
width:70%;
display:inline-block;
background-color:red;
position:absolute;
bottom:12%;
height:70%;
margin-top:-80px;
margin-left:100px;
}
HTML:
<div id="img"> </div>
Is it possible to make the id tag called #img look like it's fixed to the background?
I am simply trying to make the red block fluid between the blue box (look at the fiddle).
So if you adjust the resolution of the page the red block will not go out of the blue box height-wise, but it will go out of the blue box width-wise.
So basically I want to make sure the red block (#img) stays within the blue box that is on the background image. How can I do this?
Percentages and pixels don't mix that well... Change it all to percentages, for example like this:
#img {
width: 74.1%;
display: inline-block;
background-color: red;
position: absolute;
height: 71.8%;
top: 17%;
left: 13.2%;
}
Fiddle: http://jsfiddle.net/Niffler/r3nW8/43/
Sure you can:
http://jsfiddle.net/r3nW8/44/
body, html {
background: url("http://i62.tinypic.com/25qdg86.png") no-repeat center center fixed;
background-repeat:no-repeat;
-webkit-background-size: 100% 100%; /* use 100% 100% everywhere */
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
#img {
background-color:red;
position:absolute;
margin: 0 auto;
top:18%; /* not 15% cause you have more space on the top area! :) */
left:0;
bottom:0;
right:0;
height:70%;
width:73%; /* note the blue border on your image is not positioned well... */
}
With some more % tweaks you can achieve perfect results: http://jsfiddle.net/r3nW8/45/