css background image adapt dimension - html

I'm trying to figure out how to resize a background image only if it is bigger than the div which contains it using only CSS.
<div id="container>
</div>
#container{
width: 100px;
height: 100px;
background-image: url("...myimagepath");
}
If the image is bigger than 100x100 px it should be resized but if it is smaller I need to keep it center and not adapted. In my code it works as aspected for images smaller than the div while the image is not resized for bigger ones.

You can frig it by putting the image in a div that sits in the background.
So HTML:
<div id="container>
<div id="background">
<img src="...myimagepath">
</div>
Container content here.
</div>
CSS:
#container{
width: 100px; /* Your original dimensions */
height: 100px;
position: relative; /* Lets anything in it be positioned relative to it */
}
#background{
width: 100%; /* Same width as parent container */
height: 100%; /* Ditto height */
position: absolute; /* Take out of document flow. Default position 0,0 */
z-index: -1; /* Push it behind anything else in its container */
}
#background img {
max-width: 100%; /* Don't let it get wider than its container */
max-height: 100%; /* Nor taller */
display: block; /* Lets margins be set (otherwise in-line) */
position: absolute: /* Lets us position it */
top: 0; /* Put it at the top ... */
left: 0; /* on the far left ... */
bottom: 0; /* and at the bottom (makes sense later) */
right: 0; /* and the far right (ditto) */
margin: auto; /* Best compromise between left/right & top/bottom = centre */
}
I seem to half remember there might be the odd browser that doesn't treat the zeros for top, left, etc properly. If that's true, use a value like 1px instead.

Related

how to make to position a small image on top of a parent image in css

I have a web page design (it is an image) , I embedded it in an html and to display it and the css code is like this
.imageMain {
position: relative;
height: 100vh;
/* For 100% screen height */
width: 100vw;
/* For 100% screen width */
}
img#homeinactive {
position: relative;
top: -960px;
left: 750px;
width: 40px;
height: 40px;
z-index: 999;
}
<img class="imageMain" src="images/mainphoto.png" />
<img id="homeinactive" class="ontopPhoto" src="images/navHeader/ontopphoto.jpg" />
Now I need to put a small image image on top of that image which will serve as a button that will
redirect a user somewhere. the problem is, only the parent image follows the screen size, and it actually stretches automatically no matter what the size of the screen because of my .imageMain css class.
the small image is being misplace when I change screen size, any idea what to put in the css to make it stay like in the middle top no matter what screen size it will be..take note, this small image is on top of main image..here's my css, it's wrong
here's the html
.container {
position: relative
}
.imageMain {
height: 100vh; /* For 100% screen height */
width: 100vw; /* For 100% screen width */
object-fit: cover;
}
img#homeinactive {
position: absolute;
left: 50%;
top:0;
transform: translateX(-50%);
width: 40px;
height: 40px;
}
<div class="container">
<img class="imageMain" src="images/mainphoto.png" />
<img id="homeinactive" class="ontopPhoto" src="images/navHeader/ontopphoto.jpg"/>
</div>
You can easily achieve this by using flex. Wrap your second image in a div and use justify content: center; and it will always be in center.
Here's an example:
https://jsfiddle.net/psparthsahni/50e9nuzh/

Outter page wrap doesn't set for the height of the whole page

I have the following code that does not cover the full page height if a page has content beyond the normal view port (not having to scroll). If I scroll down the outer div displays for just a small bit and that goes back to white.
Why is the outer div not taking the full height of the page even if it requires scrolling?
html ,body {
height: 100%;
font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
width: 100%;
min-height: 100%;
background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
background: linear-gradient(#282828, #888888); /* Standard syntax */
position: absolute;
/*height: 100%;*/
}
.page {
background-color: #FFFFFF;
width: 85%;
min-height: 100%;
bottom: 0;
position: absolute;
height: 100%;
left: 7.5%;
}
<div class="page_background">
<div class="page">
</div>
</div>
I created a fiddle to demonstrate what I am doing. You can even see if you scroll in the fiddle, it doesn't take the gray border.
https://jsfiddle.net/1qwwtgjp/
Edit: Your Main Issue is CSS Positioning
See here: https://jsfiddle.net/1qwwtgjp/3/
You have used position: absolute; in your styles, but are looking for your content to flow (and your background height with it). Remove all the absolute positioning, including the left, bottom, etc, and the explicit height on your .page element so it can flow to whatever height it truly is. This will bring the outer wrapper along with it.
So the new styles for your .page class should be:
.page {
background-color: #FFF;
width: 85%;
min-height: 100%;
/** REMOVE THESE: **/
/* left: 7.5%; */
/* bottom: 0; */
/* position: absolute; */
/* height: 100%; */
}
Old Answer:
If I understand your question correctly, you may simply not be aware that browsers tend to have default margins on the <body> tag.
Simply add a style to remove it:
html, body { margin:0; }
and see if that solves your issue.
You can fix this by assigning overflow property to hidden for the outermost wrapper div.
.outerpagewrapperdiv{
overflow:hidden;
}

How can I set a div size based on the device screen size?

I'm working on a web app to be used on iOS devices, both iPhone4 and iPhone5. I developed the app using a 5 and everything fits and works perfectly, but trying to get it to fit the smaller height of a 4 doesn't seem to work. Here's what I'm looking to accomplish:
I have a header div at the top, a title div that holds an image and the date, then a list div, followed by a footer div. All are contained within a div named container. I want the header, title, and footer divs to remain fixed, and the list div to scroll the content that's dynamically fed into it on load. The footer should remain at the bottom of the screen and the list should scroll out from under it (if that makes sense).
I set fixed heights for all the divs when developing this and it works on my iPhone5, but when I try to set the list div height as ((window.screen.height) - header - title - footer) the entire document scrolls, rather than just the list div. Here's what I've created through much trial and error:
#container {
min-width: 1280px;
position: relative;
}
#header {
height: 140px;
width: 100%;
}
#title {
height: 330px;
width: 100%;
position: relative;
}
#list {
height: 1592px;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#footer {
height: 140px;
width: 100%;
}
You can use fixed positionings, plus, instead of specifying the height of #list use top and bottom to make it fit.
#container {
min-width: 1280px;
position: relative;
}
#header {
height: 140px;
width: 100%;
posiotion:fixed;
top:0px; /* Top left corner of the screen */
left:0px;
}
#title {
height: 330px;
width: 100%;
position: relative;
posiotion:fixed;
top:140px; /* 140px below the top left corner of the screen */
left:0px;
}
#list {
/*height: 1592px; remove this - the height will be determined by top and bottom */
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
posiotion:fixed;
top:470px; /* start 470px below top left corner */
bottom:140px; /* This is the trick - specify bottom instead of height */
left:0px;
}
#footer {
height: 140px;
width: 100%;
posiotion:fixed;
top:auto;
bottom:0px; /* Stick to bottom */
left:0px;
}
Note: from your code I understand #title should not be scrolled. If you want it to scroll as well put it inside #list and update the positions.

Make div expand to full height - 30px

Is there an easy way with just css to make a div expand to the full height of the page - 30px. I have a "footer" at the bottom of the page that is 30px tall and set to position: fixed; bottom: 0px; I don't want any of the content from the rest of the page to show behind this footer.
<body>
<div id="wrapper">
<div id="header">Header added just for demonstration purposes</div>
<div id="content">Main content goes here</div>
<div id="footer">And this is my footer</div>
</div>
now style
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative; /* Required to absolutely position the footer */
}
#footer {
height: 50px; /* Define height of the footer */
position: absolute;
bottom: 0; /* Sit it on the bottom */
left: 0;
width: 100%; /* As wide as it's allowed */
}
#content {
padding-bottom: 50px; /* This should match the height of the footer */
}
i would probably place all in a wrapper and set the size to 100%,
But in new css3 you have calc() which does exactly what you need: http://updates.html5rocks.com/2012/03/CSS-layout-gets-smarter-with-calc
Please note that not all (even modern) browsers yet have support for calc()

Auto-stretch a multipart CSS background by content size

I am building a CSS site and fail solving this partial problem:
On the left side there is a box which consists of three images. A top image, an (optional and stretched) middle image, and a bottom image.
I want the box to the left automatically stretch if there is more content inside. This already works for the right side with my current code.
(I put both columns into a container div and set the left box to height: 100.)
But now there shall also be content in the left box. This content does overflow because I set the left box to position: absolute. Thus it does not increase the size.
I didn't manage to get this effect without position: absolute though. I tried using float etc.
Here is the example code:
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
<div id="bgbottom">
<div id="bgmiddle">
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
With this stylesheet:
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
position: relative;
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
position: absolute;
width: 185px; /* width of the bg images */
height: 100%;
background: url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
position: absolute;
width: 100%;
height: 100%;
background: url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
position: absolute;
width: 100%;
top: 250px; /* Don't cover top GIF */
bottom: 15px; /* Don't cover bottom GIF */
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
}
It looks like this (Colored it for better understanding):
The yellow part is actually a stretched image, I left it out for the example, it works as expected.
How can I add text into the left box that will also stretch it? Or is it possible with TABLE instead of CSS at this point?
EDIT: BitDrink's solution looks this way at my browser (current FF)
alt text http://img502.imageshack.us/img502/1241/layoutsample2.png
I could be wrong here but what you are trying to achieve here is two columns of the same height no matter how much text is in the left or right columns.
Equal Height Columns using CSS is the best CSS technique for this where by the backgrounds and bottom curved edges would need to be given to div#vertical stretcher.
The only other way that I know to make two columns equal height is to use JavaScript. See The Filament group article on setting equal heights with jQuery.
the problem is the absolute positioning! If you want an automatic resize (in vertical) of the left box, just apply a "float:left" to #bgtop!
Notice that the attribute "min-height" is not supported from all browsers (for example IE6)! The code below is an example:
<style type="text/css" >
#centerwrapper {
width: 500px;
margin: 0 auto;
}
#verticalstretcher {
min-height: 280px; /* Sum of the top and bottom image height */
width: 100%;
background-color: orange;
}
#bgtop {
float: left;
width: 185px; /* width of the bg images */
height: 100%;
background: #CCC url(css/img/bg_navi_left_top.gif) no-repeat;
}
#bgbottom {
width: 100%;
height: 100%;
background: #666 url(css/img/bg_navi_left_bottom.gif) bottom no-repeat;
}
#bgmiddle {
width: 100%;
background-color: yellow; /* Repeated image here */
}
#content {
margin-left: 200px; /* Start the text right from the box */
background-color: #FFF;
border: 1px dotted black;
}
</style>
<body>
<div id="centerwrapper">
Header etc<br/>
<div id="verticalstretcher">
<div id="bgtop">
text top
<div id="bgmiddle">
text middle
<div id="bgbottom">
text bottom
</div>
</div>
</div>
<div id="content">
Content here will auto-stretch the container vertically (and the box to the left!)
</div>
</div>
Footer etc<br/>
</div>
</body>
You can see the result below:
The 4 div(s) resize vertically according to their content!