I was having issues getting a header image to be full width on every device. I fixed this by changing the background size to 100%. Now there are black bars on the top and bottom of the image, separating the content from the image. What is the best way to fix this?
Here's my CSS:
//Color Pallette
$backgroundWhite: #d1d1d1
$spectrumRed: #a10019
$darkestGrey: #2f2f2f
$darkGrey: #252525
$grey: #6e6e6e
//Fonts
$raleway: 'Raleway', sans-serif
html,body
overflow-x: hidden
height: 100%
margin: 0
padding: 0
li
font-family: $raleway
.container-fluid
background-color: #333
border-bottom: 4px solid $spectrumRed
#navbarItem:hover
color: $backgroundWhite
#active
background-color: $spectrumRed
color: $backgroundWhite
.wide (THIS IS THE IMAGE CONTAINER DIV)
margin-top: -60px
background: #000 url("/img/9114.jpg") center center
background-size: 100%
background-repeat: no-repeat
width: 100%
height: 80%
display: inline-block
#modelName
background-color: $darkGrey
color: $backgroundWhite
width: 100%
margin-top: -35px
display: inline-block
border-bottom: 10px solid $spectrumRed
#modelName h1
font-family: $raleway
font-weight: 600
And a screenshot of my issue:
You should use properties:
background-size: cover;
height: 100vh;
width: 100vw;
To achieve your 100% fully responsive image. You could always change your background size to:
background-size: content
for the tablet and mobile, but for the desktop it should be fine :)
Here's the fix. I set the height of the div to 0 and set the padding-top of the div to the aspect ratio of the image. That is just image height/image width. Mine personally came out to 52.08% on an image that is 1920/1000.
If i understand properly your question, you have a full-width image , which will work on every device width .than width 100% will work properly. For this we have w-100 class in bootstrap. if it still not resolve, than fiddle your code , i'll have a look.. all the best
Related
I have a div with a background image. I want the image to always have at least a 1% left and bottom margin/padding. The container of the div is a dynamic absolutely positioned box which can have a size of 5% or 95% (and everything in between with CSS transition).
I chose to achieve this by putting the background-image on that div which has min-height of 5% and width of 100%. The background is not repeating, centred and set to be contained within the area (background-size: contain). I decided to go with a 1% padding and background-clip CSS property to content-box, which should mean that the background covers only the content which starts at 1% away from the border. I chose padding and not margin, because box-sizing is set to border-box, therefore a width 100% with additional padding would not increase the size of the div which is not the case with margin.
However this did not work as expected:
When using background-clip: content-box together with background-size: contain, the background is contained within the border-box and not content-box and the padding cuts away the areas between the content and border.
Example:
div {
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
float: left;
width: 200px;
height: 200px;
}
.clipped {
border: 1px solid blue;
padding: 20px;
background-clip: content-box;
}
.normal {
border: 1px solid green;
padding: 20px;
background-size: contain;
}
<div class="clipped">
</div>
<div class="normal">
</div>
So the questions are:
Is this the normal behaviour?
Where is this documented?
What would be the solution to achieve what I need?
p.s. I am not English so apologies for possible mistakes or misconceptions. Also I will try to explain better in case you did not understand the issue.
Yes, this is normal behavior. The content-box does not mean the image is sized within it, it means it gets clipped by it.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
In below sample I used a pseudo class to achieve it
div {
position: relative;
float: left;
width: 200px;
height: 200px;
border: 1px solid blue;
}
div::before {
content: '';
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
}
<div>
</div>
Is there a way that I can make the width of my navigation bar the same width as the image. The problem is I'm working with an image that has an original size of 497 x 298px but to make the image stretch the full width of the page whilst still having margins of 10px on either side I had to set width: 98.4%.
Also, for some reason when I set the ul to width 100% the navigation is way too long and only fits within a normal desktop screen if I make it 50%. So at the moment they are both the same length, but when I resize the page they start to go out of sync with only the ul element following the rules I've set.
ul {
display: block;
max-width: 100%;
list-style-type: none;
margin: 10px 10px 0 10px;
padding-left: 32%;
padding-right: 25%;
text-align: center;
overflow: hidden;
background-color: #F25f70;
font-family: "Oswald", sans-serif;
border-bottom: 2px solid rgba(0, 0, 0, 0.15)
}
img {
width: 98.4%;
height: 500px;
margin-left: 10px;
margin-right: 10px;
object-fit: cover;
}
You should just wrap your navigation in a <div>. Give it 100% width. Then assign a background-image to your <ul> and make that 98% width. including these background properties
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
I created a DEMO HERE
woohooo moving to Cali in a week!!! So I made it Cali themed.
Note: The Image I used is the same dimensions specified in your post.
Also you may wana check out the background-size properties at w3schools
RESPONSIVE DIV CONTAINING IMAGE AND CONTENT
I am trying to have a div that contains a background image which has content (writing) on it as shown in the picture. The div needs to be responsive, and the image has to remain 100% and reach but not exceed the frame of the screen no matter what size the screen is.
The problem is that when I zoom out, by pressing ctrl and scroll down on the mouse, the image loses alot of it's height rather than stay the same height. How do i make it not lose its height when zooming in and out.
I've tried everything and this is the best I've got
enter code here
<div id="container">
<div class="content-inner">
<h1>HELLO!!</h1>
<hr>
<p>I HAVE A QUESTION AND WAS WONERING IF YOU CAN HELP?</p>
</div>
</div>
<style>
html, body{
margin:0;
}
#container {
position:relative;
border:1px solid red;
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background: radial-gradient(circle, rgba(17, 5, 19, 0.94), rgba(20, 7, 35, 0.78), rgb(0, 0, 0)), url(backgrounddark.png) no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#container .content-inner {
position: relative;
width: 50%;
padding: 100px 15px;
text-align: center;
margin:auto;
}
#container .content-inner .content-inner h1 {
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
font-weight: 700;
}
#container .content-inner .content-inner hr {
margin: 30px auto;
}
#container .content-inner .content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 300;
color: rgba(255,255,255,.7);
}
</style>
Thanks
In your code you have not set the height for the container, and the min-height is set to auto, which means it is going to scale to the size of the content that is contained in the div. The background image is NOT considered content.
When you zoom out, you are making the font size and padding smaller compared to the screen size, which is making the div smaller (contents get smaller, div height gets smaller).
If you wish to be able to zoom out without the image getting smaller (even though the text does) I would suggest setting the height of the div. You can set it to a percentage of the viewport height using the vh units (see here for browser support, it's pretty good but I don't know your scenario: http://caniuse.com/#feat=viewport-units). Or you can set all the elements above #container to have a height or min-height of 100%, which will allow you to use a percentage for the value of height / min-height of #container.
Note that your text will NOT be vertically centered automatically if you use a dynamic height, additional CSS will be required (see this Vertically align text in a div).
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;
}
I have the following CSS code:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 900px;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
And that makes the coverage of 100% in width, but only 900px in height. I tried to add the height: 100% but that didn't work. So far the webpage looks like this http://i.imgur.com/RMyIO4Y.jpg and I want to make the Video section not visible when User resize his browser to the full screen. How can I do that?
Thanks.
You can also set the height to
height: 100vh;
http://caniuse.com/#feat=viewport-units
Example css for Hero template:
.hero {
position: relative;
padding: 60px 0 60px 0;
min-height: 100vh;
background: rgb(40, 70, 102) url('../img/hero-01.jpg') no-repeat center center;
background-size: cover;
color: #fff;
}
Use this:
background-size: 100% 100%
This should stretch it to 100% of both X and Y.
Can you post a fiddle here? i need to check the html also. And...about the second part, you can easily do it with media queries.
Imagining the div with the video part has a class of 'video-section', you could do:
#media (max-width: 600px) {
.video-section {
display: none;
}
}