I have this part of HTML file
<div id="header">
...
</div>
and this part of CSS file
#header {
background: url("img.png");
background-repeat: no-repeat;
background-position: left top;
height: 140px;
margin: 0px auto;
}
The size of img.png is 1290 x 150 pixels. Everything was OK, but after I opened the web in sister's laptop the image is not stretched over all monitor (horizontally). There is about 50 pixels gap from the right.Is there some general solution, so that the web will display same on all monitors?
thank you
It all depends on different screen resolutions useed by different monitors/devices.
You could let the image stretch to the size of the monitor if you use an image tag to display the image, and specify its width and height properties to be 100%, but that will result in a stretched image depending of the device used...
I suggest you to look for some tutorials about centering images while occupying all the avaiable space without blank space, and retaining image proportions at the same time.
your css code will not strech your background immage, it will only not repeat. as far as I know CSS wont even do that (streching an is possibe )
Related
I have a background image that exceeds the height of the browser. How might I incorporate the image so that I can scroll down to see the remaining portion while maintaining the scale across different browser sizes? Code that I have written or used only clips the image to fit the size of the browser. Overflow seems to have no affect.
Depending on the end result you're looking for, here are some approaches and tools you could consider.
because of the different aspect ratios of desktop and mobile screens, it's sometimes difficult to have a single background image that will work well for everyone. But if you prepare a desktop background image of say 1920px wide by 1080px high, and a mobile background image of say 640px wide by 960px high, you can use media queries to specify different backgrounds for different viewports.
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
#media(max-width:480px){
body{
background-image:URL(mobile-background.jpg);
}
}
#media(min-width:481px){
body{
background-image:URL(desktop-background.jpg);
}
}
background image size of cover or contain are also really useful. Specifying contain means that the background image will be scaled to fit the size of the element it's applied to.
And specifying cover means that it will fill the background of the element it's applied to, and you should expect some croping of the background image. You can also position the image.
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
div{
background-size: contain;
/* or */
background-size: cover;
background-position: center;
}
and sometimes you might want to stop the background from scrolling:
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
div{
background-attachment: fixed;
}
How to well display a background image no matter what the size of the screen is?
Is there a preferred image size to work with?
I'm trying the new CSS3 background size attributes (cover) but I can't get a result that works well with small and big screens. I also tried different media queries but it did not work.
Do I have to create several versions of the image for different screens?
Small screen
Big screen
As you can see, on a big screen, it is like it is zoomed in so it does not display the main part of the picture anymore.
How to fix this?
The image comes from unsplash and I did not resize it.
Thanks for your help.
The problem here is that your background area has an aspect ratio of almost 4:1 which is very wide. The picture however has an aspect ratio of almost 4:3.
This is why it becomes a problem in bigger screens. The picture just isn't wide enough.
There are different solutions to this, you could for example have the picture stretch to fit any width. But that might not be the desired behavior.
This is what I would do:
Demo - try resizing window to see behavior.
div {
width: 100%;
height: 500px;
background-image: url('...');
background-size: cover;
background-position: 50% 50%;
}
The background-size: cover property sets the picture to always fit it's entire width inside the container (though height will be cut off if it doesn't fit).
The background-position: 50% 50% sets the background to always be centered. This way, if the background cuts off, you will still see the center of the picture which is probably the most interesting portion of the picture.
Is there a way to make a website 100% fluid?
As in, fill the background edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes without neccesarily retaining aspect ratio. Images inside divs and font sizes should obviously resize accordingly and maintain the same amount of white space so the page shows exactly the same content in screens from 800x600 to 4K Ultra HD, being the idea to above any kind of vertical scrollbar. Let's forget about mobile and tablets for a moment.
What I have tried for background:
body {
background-image: url(./Si0rPf7.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Which will fit background as long as the aspect ratio of the image is kept, the moment it changes you will see white spaces on both sides. If cover instead of contain, image will get cropped, which is undesirable if we want to show our whole background to everyone, even if we have to stretch it.
Now, for img src I've had half success with two methods:
.image_1 {width: 100%; height: auto;}
and
<img src="img/image_1.jpg" width="100%"/>
None of them seems able to react to both width and height. Looks like you have to choose between one or other.
For font-size I would just use vw and hope for the best.
You want
background-size:100% 100%;
You should look into the flex model: https://philipwalton.github.io/solved-by-flexbox/demos/grids/
i have a problem with the images of my slider in the header. Please take a look at the page.
When the screen resolution is too high, the images are getting cut off. Please focus on the first two images. You can test different screen resolutions here. The images look good until 20" Desktop (1600 x 900). When you test 23" Desktop (1920 x 1080), you won't be able to see the bottom of the first and the second car.
Any idea how I could fix it?
If you don't mind SEO for the images, there is another way to display them. Set them as a background-image on .item elements. And remove img tags. Then in css set something like this:
.item {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
height: 100px;
}
You need to provide a height to elements, so change it to whatever.
I need to let the image full of the entire browser,but the image's width and height pixel is fixed.How to make it fix different size of screens.Can i make the background image stretch using css?
You can do it with:
background-size: 100%;
If you want to control the height and width, you can do it like this:
background-size: 100% 100%;
However, not all browsers have implemented this feature yet.