Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I tried to solve my problem searching through the various questions already posted, but I have not found one that is made for my
I'm creating my new website using the "responsive" technique and now I'm missing just one little thing:
I enter inside a DIV a background image
The DIV should have a width of 100% to fill the entire page, and I have to make sure that the height of the DIV that contains the image will auto resize when resizing the page.
If you want the image to retain the width and height of the containing div, use:
background-size: 100% 100%;
The image will distort, but you may not mind.
If you want the background to be whatever portion of the image is sufficient to cover the
entire div as the viewport changes, use:
background-size: cover;
If you want to ensure that the entire image is in the background with the proper aspect ratio, use:
background-size: contain;
In this case, the image may be tiled to cover the div.
HTML
<div id="thediv"></div>
CSS
html, body {
height: 100%;
}
#thediv {
height: 100%;
background-image: url(http://i.imgur.com/MabCTXH.jpg);
background-size: 100% 100%;
}
Is this what you are looking for? I just added the padding: 5px; and background-color: red; so op can see that the div is 100% wide and is responsive as well as the image
http://jsfiddle.net/hyKCa/1/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I recently started learning HTML and CSS and practicing on making websites. Yesterday after adding margin top/bottom to sections, my header image got bigger than 100vw. I couldn't figure out what is causing this. And today, even removing margin is not fixing the issue.
Project: https://akinunal.github.io/project-3/
Codes: https://github.com/akinunal/project-3
This is an expected behavior.
You set a fixed height and width 100vw for div that has a background image with background-size: cover;. It means that the bg image should fill the whole div. To preserve image aspect ration browser will scale and crop the image without stretching it.
From MDN:
If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
PS: in your case, you don't need width property at all because of div by default has the width 100%.
Change your CSS: Use 100% instead of 100vw for width.
.header-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(images/slider-image1.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 650px;
position: relative;
}
Because of overflow (content is bigger than container), scrollbar appears. Those scrollbars also take space (50 px), without reducing the VW size.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I am not able to find images that would take up the full width of the page and just 25% per cent of the page height. As soon as I change the css of the image, it looks weird since its width is too big compared to the height. Does anybody have an idea about where I could find images that work with this? or how I should deal with this?
Thank you in advance,
You have many ways to fix this. An easy one is to use background-image property instead of <img> tags.
eg:
div.image {
background-image: url('your/img/path.jpg');
background-repeat: no-repeat;
background-size: cover (will cover all the div surface) || contain (will fully contains your image);
}
Fiddle :
div.image {
display: block;
width: 100%;
height: 50vh;
background-image: url('http://musiccitiessummit.com/wp-content/uploads/chicago-1.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
<div class="image"></div>
EDIT
If you have to work with <img> tags, take a look at this object-fit property : https://css-tricks.com/almanac/properties/o/object-fit/
There is no one image to fit all scenarios since there are many screens with different aspect ratio and different resolutions.
You must clarify you Art Direction and your responsiveness on how your page will look according to the view port size.
You must use #media and also have a look at the picture element, the source element and the srcset attribute since your page must be mobile friendly first
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a carousel slider which works perfectly in large screens. But when the same is viewed in small devices, a extra space of gray background is added. The same can be viewed in (ctrl+shift+m) in firefox of this SITE LINK . When viewed in firebug, I have noticed that it might due to
element.style {
height:345.6px
}
If I remove the height, it works perfectly. How to fix this ?
UPDATE: If no slider appears, please select change city to Guwahati
I would need more information to help you. Are you using some kind of template? Do you have access to the the raw HTML or CSS? Please be more clear about how we can help.
Edit:
True this should be a comment. Sorry about that. Give the element a specific class and override the template CSS. Something like this:
HTML:
<section id="home" class="customHeightStyle home-section home-parallax home-fade bg-dark-30" data-background="" style="height: 480.24px; top: 0px; background-position: 82px 38px, 44px 31px, 22px 15px;">
CSS:
.customHeightStyle {
height: auto !important;
}
In html, add the same image as background for the parent .item. And use background-size:cover;
For small screen sizes, hide the image using opacity or visibility.
Increase the height of .carousel, .carousel-inner and .item to 100%.
Because you have set height of the container element and then styled the image to be 100% in width.
The upper image is trying to preserve best aspect ratio. You need to set the height of containers properly and then try adding images as cover photos to individual sliders with background-image and background-size property.
Remove youe section style height: 5371.2px;
<section id="home" class="home-section home-parallax home-fade bg-dark-30" data-background="" style="background-position: 20px 8px, 11px 6px, 5px 3px;">
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My background image, which covers the entire web page, overflows past the HTML and body elements, even though they're both set to 100%.
It's a simple page, as seen here.
I've tried several different techniques to place the background image (including setting it to cover, but I still encounter this overflow issue)
(I feel like I'm going a little crazy, but I'm probably missing something that's very apparent).
Try overflow:hidden
.translucent {
width: 100%;
height: 100%;
background-color: rgba(0, 92, 60, 0.95);
overflow: hidden;
}
I wonder why you set this in the body tag.
It's much easier to give the body tag a background-image.
So i changed your body css style to this:
body {
width: 100%;
height: 100%;
background: url('cover-plaza-707-fifth-construction.jpg') no-repeat center center fixed;
background-size: cover;
position: fixed;
}
And you now can delete <img src="cover-plaza-707-fifth-construction.jpg" id="bg">
I hope this solves the problem, i haven't tested the scrolling yet.
[After reverting it back to a cover background image rather than the standalone image I placed with reduced z-index as a bug fix]
Setting .translucent's min-height to 100% (rather than just height: 100%;) fixed the issue.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My background Image navbar isn't showing properly. If you notice, the gradient for the navbar doesn't display properly. The top half should be a light gray and the bottom half should be a darker gray. When the page firsts loads you can see it appear but then it all goes gray and loses the gradient look.
My site is usahvacsupply.com and I just edited my background-image to be bigger to fit for a 1600 width resolution. Here is a picture of my background image http://tinypic.com/view.php?pic=20ge8nl&s=5. Any help would be much appreciated.
Here is my css code for the background.
html, body{
margin: auto;
background-image:url('/images/Testing1/bg2.jpg');
background-repeat: no-repeat;
background-position:top center;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
min-width:1600px;
min-height:1400px;
top: 0;
left: 0;
}
Removing the float:left on div with ID lol seems to fix it.
Your table element #body has a background which is obscuring the gradient. Remove it and the gradient in your background appears.
Original
#body {
background-color: #F5F5F5;
overflow-y: scroll;
}
Modified
#body {
overflow-y: scroll;
}