I am having some difficulty adjusting a background image for a website I am writing. I want to use a large picture to cover the background of the site. I am using the css property cover and it looks fine when the page loads.
My problem is when a button is clicked, it appends 10 images to an empty div. When these images are appending, that div is growing very large and changing the page size, which causes the image to reload to adapt to this siginificantly increased page size. This leads to the image looking very distorted.
Is there any way to keep the image the same size as it was when the page loads, and have a simple background color under the image that will cover the rest of the page when the images are appended?
I am using background-size: cover and background-repeat: no-repeat
Thanks for your time.
Not 100% I get you, but you could try having two divs.
One div would contain your background image and be set to height: 100vh; and width: 100vw;. This will ensure the image will always stay the same size as the viewport and thus won't change size when things are added.
Under this div, you could have another, with a simple colour property set.
I.e.,
.bg-image {
width: 100vw;
height: 100vh;
background-image: url(someurl);
background-size: cover;
background-repeat: none;
}
.bg {
background-color: grey;
height: 100%;
width: 100%;
}
<div class="bg">
<div class="bg-image">
<!-- Place where the images go -->
</div>
</div>
Related
I have an image of arbitrary shape and size which I want to enlarge into a containing div without changing its proportions and without cutting off part of the image.
Below is a diagram of what I have in mind:
Note that the image is sometimes centred vertically, and sometime horizontally.
If the image is always wide, I can use:
img {
width: 100%;
height: auto;
margin: auto;
}
but that won’t work if the image is narrower, as it will end up chopping off the top & bottom.
Is there a way, possibly using grid or flex, which will accommodate the image?
Use object-fit: contain for the img selector in the css,
your <img> tag will be your gray frame like in above.
the real picture will be hosted as you wish no matter what the intrinsic size of the image is and the size of the <img> tag is.
Thanks to #Terry’s comment, I found a solution using object-fit.
div#container {
background-color: #123456;
width: 480px;
height: 240px;
}
div#container>img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div id="container">
<img src="https://javascript101.webcraft101.com/images/photos/large/bromeliad.jpg" alt="Random" title="Random Image">
</div>
The main features are:
object-fit describes how the image is positioned within its container. In this case, it is wholly contained, and ends up being centred in the process, while retaining its proportions.
The width and height are set to 100% (of the container). I think this forces the image to scale into the container.
What a wonderful property!
My background image doesn't want to scale with the rest of the page. And when I've gotten it to do so, it created a huge white-space gap underneath it when I'm scaling down the page.
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
}
use background-size:cover for the background-image to cover the whole div.
see here more about this property : CSS3 background-size Property
.vintage { width: 100%;
height: 100vh;
background-image: url(http://placehold.it/350x150);
background-repeat: no-repeat;
background-size:cover;
}
<div class="vintage">
</div>
Try adding the property value cover to your css file.
Like this:
div {
background-image:url('vintagemcdonalds.jpg');
background-size:cover;
}
This enables you to scale the background image to be as large as possible so that the background area is completely covered by the background image.
If some parts of the background image are not visible within the background positioning area, try giving some extra information to your css such as:
width: 100vw;
height: 100vh;
(Note that CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.)
If you don't want the background image to repeat simply add:
background-repeat:no-repeat;
For more info, check " https://css-tricks.com/perfect-full-page-background-image/ " it will give you a good idea of different approaches to be considered when trying to work with a full screen background.
Hope this helps and good luck! :)
I'm reading news on this page mostly on my mobile device:
link
The big banner right of the logo is not scaling properly on the mobile device.
So when you resize the window and make it smaller everything is resizing except the banner.
Im learning php, css and just wondering how this could be solved. Ive checked also on stackoverflow and find something like:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */ }
I've tried this also in the dev. mode of google chrome but it desnt work.
Is this solvable with the provided data from the dev mode?
Code looks like:
<div style="position:relative;
width:728px; height:90px; z-index:10;
background-image: url(http://www.image.jpg);">
Based on your code, the banner is implemented as background image, not an IMG element. To make background image scaled so that it's entirely visible, use background-size: contain. So your user styles could be like this:
.site-header-banner > DIV {
background-size: contain;
background-repeat: no-repeat; // To disable repeating background image.
max-width: 100%;
}
You can use it as a background with the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/xe9tvkyr/
You can define a fixed size to DIV containing image background and change it by media query.
I have a series of images in a slide show, which have all be uploaded at different image dimensions, I want to essentially make all the images follow a rule whereby they stretch, proportionally to the max width so that if you resize the browser window, they will still keep their fluid resizing response also.
Here is the website template and the images in question.
Would love to be able to do it in CSS if possible.
I'm having trouble stretching small images to fit into a larger container, rather than trying to contain large images in a small container. Usually the smaller image stops resizing once it's hit its actual pixel dims and I want them to continue to stretch proportionally, even if this pixelates them.
The key to solving this is using background images and their CSS properties. Rather than inserting the images as <img> tags you should create containers with a background image set
<div class="slide" style="background-image: url(image1.jpg)"></div>
Give those containers some styling so they fill out your slideshow area.
position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
Then you can use background-size: contain; to make the image sit within the containers using pure CSS. It'll never extend outside of the area, but will fill it as much as possible. Also use background-position: center; and turn off image repeat using background-repeat: no-repeat; - then you'll have a single image centred and as large as it can be.
Full CSS is as follows:
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
You'll be able to use CSS transitions to control how the slideshow moves between slides.
I want to show a photo in my page, the DIV layer is 500 * 500px. I will replace the picture very often, the picture size is not sure, may be horizontal version may be vertical version, maybe 800*600px maybe 576*720px.
I don't want to get the photo deformation. How to set CSS or JS, make the photo show only the center 500 * 500 px, hide the around part.
Use a background image on a DIV with pre-defined dimensions, and set the image position to 50%, which essentially centers it. Whatever overflows the 500x500 will be cropped...
#yourImageDiv {
background: url(../img/image.jpg) no-repeat 50%;
height: 500px;
width: 500px;
}
One nice trick is to use a transparent PNG instead of a div and apply a background-image style to it. That way you get to use the image as you normally would (inline, etc.) but can crop at will.
#cropper {
width: 500px;
height: 500px;
background-image: url(myBackgroundImage.png);
background-repeat: no-repeat;
background-position: center center;
}
...
<img id="cropper" src="clear.png">