I'm trying to solve an issue with my own css stylesheet along with bootstrap. I'm trying to have an image set as a background image on my index page, but can seem to display it.
CSS in my stylesheet:
.main-image{
background-image: url(img/studio.png);
height:100%;
width: 100%;
}
HTML:
<section class="row main-image"></section>
Adding 100% width/height won't work here, because the parent of the element doesn't have static dimensions.
Instead of using height/width: 100%, use 100vh and 100vw.
1vh - Relative to 1% of the height of the viewport.
1vw - Relative to 1% of the width of the viewport.
So your code has to be:
body { margin: 0 } /* Removed the default body margin */
.main-image{
height: 100vh;
width: 100vw;
background-image: url('http://www.superedo.net/wallpapers/wallpapers/Android%20Tablet/Huawei%20Mediapad%2010%20Fhd/huawei_mediapad_10_fhd_005.jpg');
background-size: cover;
}
<section class="row main-image">
<!-- -->
</section>
You need to define what space the image should be in
Fiddle example here
.main-image{
height: 500px;
width: 100%; /* responsive */
background-image: url('https://www.prestigeanimalhospital.com/sites/default/files/08-cat-cancer-4.jpeg');
background-size: cover;
background-position: 100% 50%;
}
<section class="main-image"></section>
You can control what is shown with background-position: 100% 50%;
100% is X - the horizontal value.
50% is Y - the vertical value.
Or do it with background-position-x and background-position-y
Related
I'm working on a project where a div dynamically shrinks as the page shrinks. Unfortunately the div stays the same height this way:
CSS
.container {
min-height: 180px;
max-height: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 350px;
}
HTML
<div class="container"></div>
Instead of fixed height, use em/vh/% units for height depending on what is suitable. You can also use relative height with min-height and max-height to define a range. For example, try resizing the window and see that container always occupies half of available height.
.container {
height: 50vh;
background: green;
}
<div class="container"></div>
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
I have a span with a background where I want the image resized without loosing the radio. I mean not stretching. My image disappear when I use height: auto;
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: auto;
}
You will need to set the height to an integer or percentage like so:
#logo_span{
display: inline;
background-image: url("../gfx/hs_logo.png");
margin: -5px auto auto -100%; /* margin top right bottom left */
background-size: 50% 50%;
background-repeat: no-repeat;
width: 90%;
height: 250px;
}
Another way would be to place an <img> inside this div but have another div with the same properties but instead of have an img have the background-image. However this is considered messy and can slow down loading speeds as your loading 2 of the same image.
<div class="hiddendiv">
<img src="//file src">
<div class="visiblediv"></div>
</div>
<style>
.hiddendiv img{height:200px; width:500px;}
.visiblediv {height:200px; width:500px; margin-top:-200px; background-image:url(//path to your image);}
</style>
This is just a rough example but this has worked for me in the past, no matter how much im not a fan of this method.
If you want responsive image use <img/> tag instead css background-image. And then in css use width: 90%; height: auto;
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
I have an image of 2000* 8000 pixels. I wanted to make the width as same as the loading window while the height must be scrollable.
I mean that after the page loads width:100% and height:25% must only be displayed of the image. Then when i scroll down the rest of the height must be displayed i.e. the image should only scroll downwards not sideways.
.img {
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
html {
background: url(importantwebsite.jpg);
background-size: 100%;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;*/
}
I have used the above code but it displays 100% width and 25% height, And the rest of the image is not shown. Please help..!!
demo - http://jsfiddle.net/victor_007/uoco335z/
change the width:100% and height:auto of the image
.img {
width: 100%;
height: auto;
}
<img class="img" src="http://placeimg.com/2000/8000/any">
Remove max-height:100% and apply height:100% !important like below.
.img{
max-width: 100%;
height:100% !important;
}
DEMO