For my website http://www.suemaisano.com/, I want to increase the homepage slider BACKGROUND IMAGE height (different than slider image, I did not set any slider image, only background image). I set the class as of the slider as homeSlider, and this is the code I put in the child CSS
.homeSlider .et_pb_slide .et_pb_container {
height: auto !important;
min-height: 1080px !important;}
However, the background image height did not change when I manipulated the min-height. The actual image sizes are ~1920x1080. Anything I need to change the code to make the min height work?
Thanks in advance!
Assuming the image goes into the div where the text appears, the below should give you the height that you are aiming for.
.et_pb_slide_content {height: 1080px; }
You need to set height on description container
.homeSlider .et_pb_slide_description {
min-height: 1080px;
}
Related
I can't make the header image's height bigger. I found some CSS that made the container height bigger. But every time I change the photo out, it is still the original height: 75px;.
.container {
width:100%;
height:200px;
float:left;
margin-top:2px;
}
thml
html
What am I doing wrong?
From the screenshot i did not see any image element. If you want the image to to follow have a fixed height, you can set a height to the image itself, but if you want the image to follow the container's height, then u need to give a height to the direct container of the image, at the same time give a height to the image, 100% if you want the image to follow the height of the container.
From the code you provided. your .container has a height of 200px. If the image is inside this container, and you wish to make the image exactly 200px as the .container, then you need to add .container img{height:100%} to the image.
Try this CSS rule:
header {
min-height: 50% !important;
}
There should be something below the image that is blocking your height.
Make sure to check from the inspect element
I have a gallery (responsiveslides.js) that is launched within a jquery mobile popup that overlays the window. The desired look is to have the gallery scale based on the browser window.
Here is a stripped down working example of my setup and issue: https://jsfiddle.net/02ds2trp/
What I'm trying to accomplish is to have the popup div height match the scaled image. The blue background is ok on the sides of the image but I don't want it on the bottom/top. ie. the orange border should be tight to the image. Also the popup div shouldn't grow more then 70% of the screen.
Right now I have .popupGalleryBannerDIV with height:70% but that is growing it too big, removing that makes the image gallery have no height.
.popupGalleryBannerDIV {
position: fixed;
width: 100%;
background: #2795EE;
top: 15%;
left: 0px;
height: 70%; /* how to I make this dynamic? */
max-height: 70%;
}
Note: I've been playing with this for a week so some css markup on fiddle might be from failed attempts.
I'm having trouble figuring out how to make this work any help would be appreciated.
Edit:
Add some picture to help understand what I'm trying to do.
View post on imgur.com
Part of the problem, is that your slide is using a background image which has no default height/width on it's own. It's the content that dictates how much space should be filled up.
My suggestion is to use an tag instead or have some js function that will appropriately size the viewport height to match the image's ratio based on the viewport width.
This is how I ended up coding the size change:
function gallerySize() {
//set height of content to 70%
$('.popupGalleryBannerDIV').css("height", "70%");
//check img size compaired to it, of large set image height to height of content
var imgHeight = $('.popupGalleryBannerDIV').find('img').height();
//else if height is smaller set conect to height of img
if (imgHeight < $('.popupGalleryBannerDIV').height()){
$('.popupGalleryBannerDIV').css("height", imgHeight);
}
}
#test {background-image: url('/Skins/slickv2/csdlrsite/shared/1dpt_img_mainpic.png');
width: 200px;
height: auto;
background-repeat : no-repeat;}
this is not displaying the image . but if we change the height option to some value it is working , can any one help me in solving this problem.
The height:auto auto sizes the div to the height of the content. A background image is not content, so the div height is set to 0.
It is correct as in the answer above div will be effected to that property, more over i am not sure but may be due to: for the background image first to check whether it is applied or not give the actual size(h and w) of the actual image...
CSS doesnt count Background image Height in the "auto" detection. only things like texte, other blocks and such ...
Given the following CSS rule,
#block1 {
text-indent: -1000em;
background: transparent url(../images/xxx.png) no-repeat scroll center center;
width: 100px;
height: 50px;
display: inline-block;
}
Assume the image xxx.png is of dimension 100px by 50px. If I need to make this image displayed on #block1 looks smaller, can I simply change the width and height of #block1 or I have to first re-size the image and then change the width and height of the #block1 accordingly.
thank you
You can't in CSS1 and 2, but CSS3 supports the background-size property, which if you set to 100% should give you what you are looking for.
However, you probably should just resize the background image though, unless you have a compelling reason not to :)
CSS can only position the image, not adjust it. If you absolutely needed to resize the image through CSS, you'd have to have the image actually inserted as an img tag, then position it behind the content. It's best just to edit it.
no, the image will just appear to be cropped.
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size