background-size: contain too much whitespace when changing browser size - html

How do I eliminate the whitespace when the browser size changes if I am using background-size:contain;?
The whitespace between the image and the text is way too much with smaller browser sizes. site is: http://16debut.com/test.html
CSS is:
body {
margin:0px 0px;
}
#hero {
background-clip: content-box;
background-image: url("imgtop.png");
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 235vh;
}
#content {
padding: 100px 50px;
text-align: center;
width: 80%;
margin: 0px auto;
}
#content h2 {
margin: 0px 0px 30px 0px;
}
#footer {
padding: 30px 0px;
text-align: center;
background: #ddd;
}

jsbin demo
You want to go fully responsive but keep the white clouds at the bottom?
Use two background images for the same element.
Cut out the white bottom clouds save as separate .png image. Use as first background-image.
(optional) Save again your bigger image, just without the white clouds. Use that image as second background image value.
Now in CSS:
set the clouds to background-position: bottom and 100% size ("width")
Set the bigger image to center (50%) position and cover
CSS
html, body{height:100%; margin:0;}
#hero{
position:relative;
height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/
background: no-repeat
url(http://i.stack.imgur.com/eWFn6.png) bottom / 100%, /* BOTTOM CLOUDS OVERLAY */
url(http://i.stack.imgur.com/IVgpV.png) 50% / cover; /* BIG IMAGE */
}
HTML
<div id="hero"></div>
<div class="other">
<h1>Other Divs</h1>
<p>bla bla</p>
</div>
Seems that Safari is a quite stupid browser (they even removed support for windows since 2012... Amazing). Here's the jsBin example and css:
#hero{
position:relative;
height: 900px;
height: 100vh;
background: url(http://i.stack.imgur.com/eWFn6.png) no-repeat bottom, url(http://i.stack.imgur.com/IVgpV.png) 50%;
background-size: 100%, cover;
}

Related

How to make a div image responsive

I tried with
.slider {
background: url(../images/slid1.jpg) no-repeat 0px 0px;
background-size: cover;
max-width: 100%;
min-height:800px;
}
.slider1 {
background: url(../images/slid2.jpg) no-repeat 0px 0px;
background-size: cover;
}
.slider2 {
background: url(../images/slid3.jpg) no-repeat 0px 0px;
background-size: cover;
}
i want to know how to make this div image responsive?
In your example css you are using background-size:cover. This property causes the image to scale to the smallest size in where both the width and height of the image are at least the size of the container. background-size:contain might be give the behaviour you want. It is the opposite of cover, in that it tries to scale the image to be as big as possible in the allocated space without clipping.
.img
{
background-image:url(https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d);
background-repeat:no-repeat;
background-size:contain;
min-height:400px;
max-width:50%;
}
<div class="img">
</div>

<p> tag always under background in <div>

So basically I want my p tag to always be displayed under my background image. If I make my window smaller, the p tag should not overlap the background-image.
I know adding it in the source code as a img in a separate div would help a lot, but an answer for this would be nice.
HTML:
<div class="champ-link img-background">
<a>
<p>browse the selection</p>
</a>
</div>
CSS:
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 50px 63px;
}
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 50px 63px;
padding-top: 63px;
}
or
p {
margin-top: 63px;
}
Just took the p tag out of the div to allow the p tag positioning.
<div class="champ-link img-background">
</div>
<a><p>browse the selection</p></a>
css:
img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
height: 10%;
background-position: center;
}
never overlaps the div.
Here is an alternative approach negating the need for padding or margin to "make space" for the image size, for instance if you want to scale your image size to your screen size
<div class="champ-link">
<div class='img-background'>
</div>
<a><p>browse the selection</p></a>
</div>
CSS
.img-background {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-size: 100%; /* or cover or contain etc. */
display: block;
margin:auto; /* can add optional margin for top bottom too
so image doesn't "touch" anchor below it */
width: 50px; /* or whatever you want/need */
height: 63px; /* or whatever you want/need */
}

Fit background image to border HTML/CSS

I am making a test webpage to learn html/css. I would like to make the image mold to the shape of the border. It should not be much of a problem but it seems as though the image in not centered in the border. As I change the image size etc it seems as though the image is more so in the middle of the page and leaves the border etc. I just want it to fit perfectly in the border, and for the photo to be clipped along the borders edges. I am having problems with this.
How can I make it so that the image is directly centers and fills the entire border without the middle of the photo or the majority of the photo being left outside of the border?
#pic {
float:right;
transform: rotate(90deg);
}
#bod {
height:300px;
width:300px;
border: 5px ridge blue;
float:right;
border-radius: 105px 105px 0px 0px;
overflow:hidden;
background-image: url("smile.jpg");
background-size: 800px 800px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div id="bod">
<div id="pic">
<img src="http://lorempixel.com/800/500" />
</div>
</div>
Change the CSS for your #bod selector to the following:
#bod {
border-radius: 105px 105px 0px 0px;
border: 5px ridge blue;
height: 300px;
width: 300px;
float: right;
overflow: hidden;
background-image: url("smile.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Just to be clear, I've removed the background-attachment attribute from the style definition and changed the value of the background-size attribute to cover, which is the important part.
Update
You've previously set the image through your CSS by setting the background-image to url("smile.jpg") in the #bod styling. I'm guessing that line isn't needed anymore since you're now setting the image in your HTML with: <img src="http://lorempixel.com/800/500" /> instead.
That image is now off-center, to fix that change your #pic styling to the following:
#pic {
float: right;
transform: rotate(90deg);
transform-origin: 50% 50%;
height: 100%;
width: 100%;
}
I've added the transform-origin, width and height attributes to the #pic styling.
The center of rotation is middle of div, so you have to make sure that the center is in the right place. You should just do this:
#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}
https://jsfiddle.net/ebc5yjzu/3/

Percentage width and height hides background image

Demo
.moving_background
{
background-image: url("../image/quote3.jpg");
background-position: 50% center; /*Centering property*/
background-repeat: no-repeat;
height: 100px;
margin: 20px;
width: 100px;
border:1px solid;
}
If i change the width and height to 100%, it is not showing the border to me. I don't understand the reason. Please let me know this
I am trying to center this div in the body. Any other ways are also welcome except negative top, left, margin values.
Any idea?
The issue is that background-image does not count as content in your div, so what you have is an empty div, hence it has no height. A way around this is to add the image inside the div, then hide it.
HTML
<div class="moving_background">
<image src="http://placehold.it/100x100" class="background"/>
</div>
CSS
.moving_background {
background-image: url("http://placehold.it/100x100");
background-position: 50% center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
margin: 20px;
width: 100%;
border:1px solid;
}
.background {
visibility: hidden
}
JSFiddle: http://jsfiddle.net/nhg33xek/4/

100% Width is not working as the background image of Div

I have an image Which i need to show as background image with 100% width in footer of my webpage.But my image is getting cut at the right of the footer.
Here is my code in HTML..
<div id="footer" class="footer-shadow">
</div>
And here is the css.
.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%;
color: gray;
}
Please help me to correct it and make it responsive to suit all web page size .Thanks .
You can do simple this:
background: url('../img/new_images/footer-bg.png') center center no-repeat;
background-size: contain;
Try to use background-size:
.footer-shadow
{
position:relative;
background-image: url('../img/new_images/footer-bg.png');
margin-top:2px;
height: 220px;
width: 100%; /* it sets the div width */
color: gray;
background-size: cover; /* now bg image is full width */
}