I'm trying to make a website and I want an image (1920 × 1080) to cover the whole page. I used:
background-repeat: no-repeat;
background-size: 100%;
And it looks fine. But when I resize my browser and pull it down vertically, the image does not come with it. I want my picture to resize for example like this site: https://www.okainsbayseafood.co.nz/ (when you resize the browser vertically the image goes with it)
Sorry for my English and if I sound stupid
my webpage
Switch background-size from 100% to cover:
background-size: cover;
This tells the browser that the image should fill the available space, and will alter the dimensions of the image to do so.
Note: If you are adding this CSS to an element that is not the body tag, you may need to add additional code to resize the element to which you are adding this background. This CSS will create the desired effect if added directly to the body element.
Actually you have many possibilities to get such a result:
The page you linked above uses so called breakpoints, where it loads a resized image based on the screen size. This is indeed a good idea in that case, because they use very large images, which would load forever on small screens and low bandwidth.
For you, as a beginner, it is probably better to firstly get some deeper knowledge into CSS and what you can do with just a single image, and after that you can opt in to optimisations like the site above. So for you something like that would probably work:
background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */
Study that CSS code and make sure you understand what it does and what other options you have. You might play around with some values there and get some other results.
Related
I got an Image which is 400px x 685px. In the website, i set it will only show 200px x 685px. I want to know how to show the whole image when the mouse hover the image and show another half of the image 200px x 685px to 400px x 685px? Thank you
So I think a part of your css may looks like:
.your-class {
background: url("[the path of your image]");
background-size: 200px 685px;
}
then for when the mouse hover the image:
.your-class:hover {
background-size: 400px 685px;
}
Note that if you're using the <img> tag itself in your .html file, then you should write width and height instead of background-size. Anyway The code above is somehow what developers do in css in this case. But obviously it really depends on how you've structured your HTML with div tags and also the classes you've given to these tags.
you achieve by set
.selector:hover
{
background-size: 100% 100%;
}
I think an acceptable solution would be to create a div in your html. In your style sheet (aka - css file) you should define it with width:200px, height:685px; the next thing you want to do is to set all divs tags (or any id you give this fella) a background-image:url("whatever.png");
Now, you should also use the background-position:right (or left, your choice).
whta will happen so far? Your div will show half an image.
Now you should use div:hover as a new set of rules in your css, and there also use the background-position:left/right (the one you didnt use).
Tell me if it works.
I have a navbar and footer than I grabbed and customized from Bootstrap's site. I now want to have a background imagine, but I'm unsure how to do this. I know if I wanted to have just an imagine, I could put it in a div between the navbar and footer and set play around with height:100%; width:auto; so that it resizes with the browser (although this doesn't work perfectly without some modifications) but I don't know how to do this if I have body { background-image: url('...'); } I have a large resolution picture in there right now, and on a 1080 screen it doesn't scale down, it just shows 1080px of the original imagine. Is there anything in Bootstrap or CSS tricks I can use? This might be trivial to some but I am new to this, just finished Codecademy courses which introduced me to Bootstrap and now I'm trying some stuff on my own.
So to recap I want to have 16:9 ratio of a large picture, if the browser becomes to narrow, I want the height to stay the same and start "cutting off" the left/right sides of the image so that the center of the image is still in the center of the browser. Likewise for vice versa. the height:100%; width:auto; doesn't quite work because if the ratio is wrong, it stretches the image.
I also want to have a different picture if the website is accessed from a screen-reader, but that's a project for another day. Let me know if I need to clarify anything, and thanks in advance
Use your CSS this way to make the background responsive.
body {
background-image: url("myimage.jpg");
background-size: cover;
}
Then when the page becomes "too narrow" use media queries to switch the background-size properties to actual width and height that work the way you have in mind.
Users are able to upload an image that get displayed in a square container in the UI. The problem is that they can upload images of any size so they may be to small, portrait, landscape or some odd aspect ratio. Images should always fill the container and be centralli positioned.
I would like to style these images so that smaller dimension is always of specified size while keeping aspect ratio as is.
Suppose I want my images to have resulting dimension 50px (smaller one should):
Portrait image: 100px(w) x 200px(h) => result: 50x100
Landscape image: 200px(w) x 100px(h) => result: 100x50
Square image: 100px(w) x 100px(h) => result: 50x50
I want my images to be at least 50px in either dimension. Using max-width and max-height resizes images to at most 50px...
Requirements for original solution
CSS only
Images should be IMG tags, and not placed as backgrounds
No Javascript
I've tried using max-dimension styles but using this I can always control just one dimension. I want to control both simultaneously.
Requirements for plan B solution
It's possible that original solution restricts too much with its requirements. In this case I would be using CSS backgrounds as described in this question. The problem is that my images aren't defined during design time, but rather during runtime as users are selecting images and I'm using FileAPI to display them before uploading to server. This would require me to define inline styles and I'd like to avoid that.
Resulting solution
Unfortunately it isn't possible to resize images directly using only CSS. And with images I mean the IMG elements. This functionality is otherwise supported for element background images. And IMG elements are no different in this regard so we can actually set backgrounds on them too. My image therefore displays a transparent image and has a background set to what image should display.
This is the solution I ended up using:
img {
height: 50px;
width: 50px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
I'm programmatically setting background image using inline CSS as images are read using FileAPI from local file system and I'm using data URI to set them as backgrounds.
Works...
try this css for image tag:
img{
max-width: 100px;
max-height: 100px;
}
in this case you have Portrait and Landscape images as you want(with keeping their aspect ratio).but only Square are stayed 100*100.
here is a fiddle .
I am at the end of a project. I have written a lot of lines of CSS code and adding the images to a class/id would mean editing a lot of code that I have written. It would be better if a division is added inside a image tag in HTML.
Hence my question is: How to include a division inside a image tag in HTML?
Pseudo selectors might work for me but how do I do it with Pseudo selectors?
If you are not able to solve it, have a look at this link where I have used a different approach:
Make division image responsive
So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from).
I have an JPG image with size 1024 x 724. My page size is not fixed.
My requirement is:
If I resize the page then the background image should also resize and fit to the page.
Also I don't want to keep the image related information in my Html page/JSP. I want to do this using plain CSS. I am not using CSS3. Because there is an attribute called background-size which can make the image stretch to the page width and height. Currently only Google Chrome supports this.
Any help ?
You can't resize background images with CSS2.
What you can do is have a container that resizes:
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>
This way, the div will sit behind the page and take up the whole space, while resizing as needed. The img inside will automatically resize to fit the div.
try something like
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
You can either use JavaScript or CSS3.
JavaScript solution: Use an absolute positioned <img> tag and resize it on the page load and whenever the page resizes. Be careful of possible bugs when trying to get the page/window size.
CSS3 solution: Use the CSS3 background-size property. You might use either 100% 100% or contain or cover, depending on how you want the image to resize. Of course, this only works on modern browsers.
Depending on what kind of image you have, it might be better to rework the design so that the main image fades to a set solid color or repeatable pattern. If you center the image in the page and have the solid color as the backgroud.
See http://www.webdesignerwall.com/trends/80-large-background-websites/ for examples of sites using large or scalable backgrounds.
These three line all together worked for me.
background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;
background:url(bgimage.jpg) no-repeat;
background-size: cover;
This did the trick