I'm working on a responsive site (using Foundation 3) that uses brush strokes as button backgrounds. I'm having a hard time with 1) getting the images to scale with the rest of the responsive design 2) making the full size background image show no matter how big the container div is.
A couple screen shots:
When the browser is full width-
http://www.screencast.com/t/3Lu86fhnsZkk (I'm a new user can't post images)
When the browser scales in width-
http://www.screencast.com/t/3Lu86fhnsZkk
CSS:
h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}
What's the better way to have background images that 1)show full size even though the content is small and 2) stay responsive?
For making the background fit to the container it belongs to, set the background-size to cover
h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
The Image will resize while you resize the container element, so make the container element responsive using percentage values for width/height or use media queries.
Use min-width and max-width to prevent the element from getting too small or wide.
Related
There is an image of a coffee cup. I am trying to achieve a functionality where even though the window size is decresed the image of the coffee cup stays visible and also there is no change in its actual size.
Currently what is happening:
Above picture is the initial state where i have not started to decrease the window width.
In this picture we could see that till there was margin in the left side of the image then upon decreasing the window size both right and left space decreases uniformly but after that the left side became static and only right side started to decrease making the cup to disappear.
Here is the css code:
.App {
text-align: center;
border: 2px solid black;
width: 70%;
margin: auto;
}
Here is the react code:
<div className="App">
<h1>Hello</h1>
<img src={cupImage} />
</div>
Please guide me on how i could achieve my required functionality using css or some other way. Also let me know if more information is required.
First, set your image to the width of its container with width: 100%.
Then you can use object-fit and set its value to cover. The image will fill the height and width of its container while maintaining its aspect ratio, cropping the image in the process in a centered manner.
You can then give img a height or a min-height.
img {
width: 100%;
object-fit: cover;
min-height: 200px;
}
MDN docs: object-fit
i have portrait image (width: 869px; height: 2853px) which i wanna use as the background image for my website. the image should be responsive and always fill the entire width of the browser window. the image should keep its proportions and should never be cropped. therefor the height needs to adjust to the given width. since the image height is always bigger than the viewport height, you should be able to scroll to the bottom of the image, which should be the bottom of the website as well.
i'd really appreciate if someone would tell me how to do this.
I think the other commenters are ignoring your request for help in not "cropping" the image, when they keep suggesting use of background-size: cover.
Here's what I've gathered are your requirements:
An image to be a background, behind the content of your site.
The background image has a specific aspect ratio and should not be cropped
If the browser window doesn't match the images aspect ratio, it should allow scrolling vertically, but should always fit to the windows width.
A css only solution...
body {
position: relative;
margin: 0;
}
body::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 0;
/* height / width = ratio% */
/* 2853px / 869px = 328.3084% */
padding-bottom: 328.3084%;
padding-bottom: calc(2853 / 869 * 100%);
background: url('//placekitten.com/869/2853') center top / 100% auto no-repeat;
}
Replace the url with the url of your image, and if the image pixel dimensions change, update those in the way I have commented out how padding-bottom should be calculated.
This creates a separate background element inside the body of the website and still allows you to have whatever content you want inside your site. But keep in mind, if you're on a very small screen, say 320px/480px, and the websites content becomes very tall because of the narrow width of the screen, this background image could be scrolled passed to account for the content. That won't break this code, but I would just suggest adding a background color or texture to your html element, which would show below the image in this case. Good luck.
I have a website that I am trying to make behave decently when a browser window is resized. For instance, I want the banner image to be resized when someone shrinks the browser window. The site is http://www.pfp-consortium.org
The banner on top is specified in CSS as
#rt-showcase .rt-container {
border-bottom: 0px none;
height: 200px;
width: 1200px;
background: transparent url("/images/headerimgs/topimage.jpg") no-repeat scroll center center;
}
So I know the fixed width and height has to go. In reading numerous threads on this site, I tried various recommended approaches. I tried setting width (and max-width) to 100% and height to auto, which seems to be the accepted approach. Strangely, whenever I make height anything other than a px value, the image disappears!
Maybe some other aspect of the site is preventing the resizing happening as I would expect?
Any insights appreciated.
The problem is that .rt-container is empty so when the height is auto (or anything except px) the div defaults to 0 height (empty). If you take that image out of the background image and make it an <img> tag then you can apply width: 100%; height: auto; display: block; and it will scale with the window correctly.
I have a page and I want to eliminate the scenario where it scrolls left to right. No matter what resolution I view it on, it leaves about 70px of white-space on the right. On the page http://bitfilmfund.com/ I have set
for the city image background part, I have already set the body to be:
#baner {
min-width: 100%;
float: left;
background: url(../images/city-backgound.jpg);
margin-top: 0px;
}
html {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
body {
margin: 0px;
min-height: 100%;
min-width: 100%;
}
I also did a media query where I defined the CSS to resize the image based on a max-width of the viewport, such as:
#media (max-width: 1600px) {
#baner {width: 100%;
}
}
to get the city scape image to stretch the screen, and tried smaller sizes too for smaller res's, but it just does not work.
There is consistently a patch of white space at the right. Even if I set the CSS width's to be as high (high number for width, that is) as they can be until the screen is filled, I still have the left-right scroll. I want the images and background to resize to fill the screen and create no need for left-right scroll. Why don't this CSS works?
Quick Fix:
The first <div> with class='row' is causing the page to scroll horizontally; more specifically:
margin-left: -15px;
margin-right: -15px;
will cause this unwanted whitespace and horizontal scrollbar.
Additionally, the margin on the <body> should be set as:
margin: 0px;
in order to avoid some browsers (Chrome, for example) applying the 'default' margin that they like to apply.
Longer (surplus) fix:
Whilst the container elements on the page are re-sizing dynamically, a fair amount of the content is not. (Including the banner image as mentioned and the iframe containing the video.) The user's viewport size should be taken into consideration, in that when viewed from a smaller ~<1675px width the top navigation bar refuses to resize down and instead creates the horizontal scrolling issue. These problems can be fixed by using percentages rather than px, as I am sure you are well aware, (considering the usage of percentages on container elements).
Obviously, the screen size cannot resize down indefinitely - a limit has to be drawn somewhere. According to W3Schools, most browsers are now above the 1024x768px as a minimum, even Google doesn't resize down to this level however. It's up to you to choose where the minimum size lies for your website; but the more all-encompassing, the better.
Banner image:
This should be a fairly straightforward part, the following CSS properties should be of use to you, when added with the CSS that defines the image to be displayed:
background-size: 100%;
background: //your-image-location// no-repeat;
This will however, become stretched or compressed depending on the browser size, but is a good starting point for resolving the issue.
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size