Take the following code:-
HTML:
<div id="wrapper">
<div id="nottingham-park">
</div>
CSS:
#wrapper {
width: 100%;
height: auto;
}
#nottingham-park {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
background-size:100% auto;
background-repeat: no-repeat;
display: block;
//height: 700px;
}
FIDDLE
If I don't set a height to #nottingham-park, the background image isn't visible, if I set a height, it's not responsive.
How can I display the image so it's always 100% width and auto height?
you can force the size of #nottingham-park to the size of the background-image with padding-top. see the comments in the css to see how you can calculate what the padding-top should be.
this way your image will be responsive and never stretched out of proportion.
hope this is what you are asking for.
#wrapper {
width: 100%;
height: auto;
}
#nottingham-park {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
background-size: contain;
background-repeat: no-repeat;
display: block;
/*
width of image / height of image * width
699px / 1200px * 100 = 57.7208918249
(change the 100 in this formula to whatever you want.)
*/
padding-top: 57.7208918249%;
}
<div id="wrapper">
<div id="nottingham-park">
</div>
</div>
EDIT
How about a fluid padding-bottom ?
Like this
#nottingham-park {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
background-size:100% auto;
background-repeat: n-repeat;
display: block;
padding-bottom : 55%;
}
Related
I want my img to always be the same size, but to make it look good too. (object-fit?). I want these pictures to be the same size.
Actually my img has width: 100%;, and doesn't have height property css.
Please, check my code in jsfiddle. (comment)
To make your image of same size. keep your image inside a div and give some width and height in that div. Then by adding a css property of width:100% and height:100% your image will always be the same size of the div.
<style>
.img-box{
width:300px;
height:300px;
}
.img-box img{
width:100%
height:100%;}
</style>
<div class="img-box">
<img src="image.jpg">
</div>
https://jsfiddle.net/z09xa8ph/2/
Here is your edited fiddle, one additional wrapper around the img tag was added and you have to set at least some height value to the box, I added it to the .st--player-box class set it to 31vh, to keep it somewhat responsive. Of course this where you can edit it to fit your needs.
.st--image-box{
height: calc(100% - 55px);
width: 100%;
float: left;
}
An issue that can come with this approach is that bigger images could be cut off wrong since when using object-fit: cover, the object-position can't be set to center the image, but the cover atribute keeps the image aspect ratio at the parent box size, so images in all boxes will have the same size not depending on their aspect.
It is a solution that does not stretch the image.
* {
box-sizing: border-box;
}
a {
color: #d9400b;
text-decoration: none;
text-align: center;
}
.st--player-box {
border: 1px solid #dadada;
display: block;
float: left;
width: 31%;
margin: 1% 0 1% 1.7%;
}
.st--player-box .st-player-img {
display: block;
}
.st-player-img {
/* just adjust the height and width */
height: 300px;
width: 100%;
object-fit: scale-down;
background: black;
}
.st--player-info {
height: 55px;
}
<a href="http://strefatenisa2.crehler.com/zawodnicy/rafael-nadal/">
<div class="st--player-box">
<img class="st-player-img" src="https://media.strefatenisa.com.pl/media/image/74/45/ea/rafael-nadal.jpg" title="Rafael Nadal" alt="Rafael Nadal">
<div class="st--player-info">
<span class="st--player-name">Rafael Nadal</span>
</div>
</div>
</a>
<a href="http://strefatenisa2.crehler.com/zawodnicy/roger-federer/">
<div class="st--player-box">
<img class="st-player-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" title="Roger Federer" alt="Roger Federer">
<div class="st--player-info">
<span class="st--player-name">Roger Federer</span>
</div>
</div>
</a>
I'm trying to do this in CSS and thought it was simple, I've never actually needed to do this before, but now I've tried it I can't get it to work.
I have a container, and in it is an image.
What I want is the image to increase in size based on HEIGHT not WIDTH. I thought this would as easy as this:
#project-header {
height: 50%;
}
#project-header img {
display: block;
height: 100%;
width: auto;
margin: auto;
}
This isn't working.
My container is 50% height of the browser window, so this is all fine, but the image displays at its original size.
I expected it to behave as a responsive image would when using width: 100%, height: auto; but my image is ALWAYS its original size (and so flows out of the container) and doesn't adapt to the height of its container.
Am I missing something? Or is this just not possible? Is there a way to do this?
To have your div take height: 50%, you first need to give height:100% to all the parent divs all the way to the html tag
html, body{
height:100%;
}
Then your css will work as expected
#project-header{
height:50%;
}
#project-header img{
max-height: 100%;
width: auto;
}
html, body{
height:100%;
/* width: 95%; */
}
#project-header{
height:50%;
width: 500px;
}
#project-header img{
max-height: 100%;
width: auto;
}
.second-image{
height:50%;
/* width: 500px; */
}
.second-image img {
max-width: 100vw;
height:auto;
width:auto;
max-height:100vh;
}
Method 1
<div id="project-header">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
Method 2
<div class="second-image">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
I'm trying to align the background image of a div to the top of the div, but it continues to align it to the top of either the parent div or the whole page (I'm not sure which one, but I think it's page)
JSFiddle: https://jsfiddle.net/Minecraft_Percabeth/1wbuduze/2/
The background image of the #bottom div should show over the top of their heads, but instead the top is aligned to the top of the #wrap div. Edit: The image should also stay where it is when scrolling down, which is why I'm currently using fixed.
Change the margin-top to 0 to see what I mean.
<div id="wrap">
<div id="bottom"></div>
</div>
#wrap {
background-color: yellow;
height: 500px; width: 500px;
position: absolute;
}
#bottom {
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
height: 400px; width: 500px;
margin-top: 100px;
}
The fixed in
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
Is the shorthand for background-attachment: fixed;That is why the background image is fixed to the top "the page".Without this property the background image moves to margin-top: 100px;
Edit:
In order to move the background image vertically, you can use background-position: center XY%; and add again background-attachment: fixed;
#bottom {
background-image: url("http://i.imgur.com/BsTVroc.jpg");
background-repeat: no-repeat;
background-position: center 20%;
background-attachment: fixed;
height: 400px;
width: 500px;
margin-top: 100px;
}
#wrap {
background-color: #737373;
height: 500px;
width: 500px;
position: absolute;
}
<div id="wrap">
<div id="bottom"></div>
</div>
You can use background-position: center 100px; - this will move the background image down by 100px.
Asking for advice: What would be the best way of making my website's (square) logo appear on or to the left of a fluid header?
My header takes up 100% of the width, but resizes in height depending on the viewport size. So I can't simply float the logo to the left of the contents, because then the image doesn't have the right height (and width, because it's square).
I tried setting the picture as background-image to the header, using:
background-position: left;
background-repeat: no-repeat;
background-size: contain;
But the problem then is that it needs different paddings-left at different screen/viewport sizes.
Then tried putting display: table on the header and display: table-cell on the logo and header contents div, but then the header contents resize to the height of the logo rather than the other way around because the logo is the biggest element in line.
Here's the HTML (simplified):
<header>
<div class="header-contents">
<h1>Site title</h1>
<nav>
</div>
</header>
What should I do?
EDIT / COMPLETELY DIFFERENT SOLUTION:
Style it as a CSS table, put the img in a DIV that's the left table-cell, give that a percentage width and auto height:
(Here in a codepen: http://codepen.io/anon/pen/XXNyBe)
<div id="header">
<div id="logo">
<img src="http://placehold.it/300x300/fa0">
</div>
<div id="restofheader">
<h1>My Headline</h1>
</div>
</div>
#header {
background: green;
display: table;
width: 100%;
}
#logo {
display: table-cell;
line-height: 0;
width: 20%;
}
#logo img {
width: 100%;
height: auto;
}
#restofheader {
display: table-cell;
vertical-align: middle;
text-align: left;
padding-left: 30px;
}
Addition, 2 Screenshots where this is applied to your site (with 20% logo width = header height - could be smaller or larger):
Large screen:
small screen:
.header-contents {
background-image: url(yourimage);
background-position: left center;
background-size: auto 100%;
background-repeat: no-repeat;
}
if it is not the answer your looking for, please provide a fiddle and a better explanation :)
What I've done instead now is give fixed header heights for different resolutions. It seems totally fluid is not an option here.
The code, in case anyone's interested:
#media only screen and (min-width: 568px) {
.site-branding {
background: url('http://atlanticsentinel.com/wp-content/uploads/2015/12/Atlantic-Sentinel-logo.png');
background-position: left;
background-size: contain;
background-repeat: no-repeat;
height: 100px;
padding-left: 115px; }
h1.site-title {
font-size: 2em; } }
#media only screen and (min-width: 768px) {
.site-branding {
height: 120px;
padding-left: 135px; }
h1.site-title {
font-size: 3.2em; } }
If there is another option, please let me know! I would appreciate other ideas!
Thank you for your help!
I have a fixed header that i want to keep behind the container div as I scroll down the page. as seen on http://www.madebydaryl.co.uk/. It's sorta working except the background of the content div seems to be hidden behind the background of the header. Not sure how to solve this..
My css:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
display: table;
width: 100%;
z-index: 1;
top:0;
left:0;
}
.container {
position: relative;
margin-top:100vh;
background: #fff;
z-index: 2;
}
EDIT:
This kinda worked:
header{
position: fixed;
background: url(images/mainbg_blur.png) no-repeat center;
background-size: cover;
height: 100vh;
min-height: 100%;
width: 100%;
display: table;
top:0;
left:0;
}
.container {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
margin-top:100vh;
background: #fff;
}
Except the background of the container div doesnt stretch to cover all of the content, just the height of the viewport. Any ideas?
The effect that you are talking about is known as Parallax Sliding effect,
Check it here
http://stephband.info/jparallax/
or
http://webdesign.tutsplus.com/tutorials/create-a-parallax-scrolling-website-using-stellar-js--webdesign-7307
Alas, such a simple solution.
Just put another div inside the container div, and give it the background color.
so:
<header>content</header>
<div class="container>
<div class="bg">
Main content
</div>
</div>
and the same css except move the background to the .bg.